zl fetch
v6.0.6
zlFetch é um wrapper de busca que fornece uma maneira conveniente de fazer solicitações.
Seus recursos são os seguintes:
Melhorias na qualidade de vida em relação à função fetch nativa
response.json() , response.text() ou response.blob()catch .await — erros podem ser retornados para que você não precise escrever um bloco try/catch . Melhorias adicionais em relação à função fetch nativa
Content-Type são definidos automaticamente com base no conteúdo body .headers , body , status e muito mais.GET , POST , PUT , PATCH e DELETEauth . Nota: zlFetch é uma biblioteca ESM desde v4.0.0 .
# Installing through npm
npm install zl-fetch --saveEntão você pode usá-lo importando-o em seu arquivo JavaScript.
import zlFetch from 'zl-fetch'zlFetch sem npm :Você pode importar zlFetch diretamente para JavaScript por meio de um CDN.
Para fazer isso, primeiro você precisa definir o tipo do seu script como module e depois importar zlFetch .
< script type =" module " >
import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script > Você pode usar zlFetch como uma função fetch normal. A única diferença é que você não precisa mais escrever um método response.json ou response.text !
zlFetch cuida disso automaticamente para que você possa usar sua resposta diretamente.
zlFetch ( 'url' )
. then ( response => console . log ( response ) )
. catch ( error => console . log ( error ) )zlFetch contém métodos abreviados para esses métodos REST comuns para que você possa usá-los rapidamente.
zlFetch . get ( /* some-url */ )
zlFetch . post ( /* some-url */ )
zlFetch . put ( /* some-url */ )
zlFetch . patch ( /* some-url */ )
zlFetch . delete ( /* some-url */ ) zlFetch oferece suporte aos tipos de resposta json , text e blob para que você não precise escrever response.json() , response.text() ou response.blob() .
Outros tipos de resposta não são suportados no momento. Se você precisar oferecer suporte a outros tipos de resposta, considere usar seu próprio manipulador de respostas
zlFetch envia todos os dados necessários no objeto response . Isso inclui o seguinte:
headers : cabeçalhos de respostabody : corpo de respostastatus : status da respostastatusText : texto de status da respostaresponse : resposta original de Fetch Fazemos isso para que você não precise pescar os headers , status , statusText ou até mesmo o restante do objeto response sozinho.
Novo na v4.0.0 : você pode depurar o objeto de solicitação adicionando uma opção debug . Isto revelará um objeto debug que contém a solicitação que está sendo construída.
urlmethodheadersbody zlFetch ( 'url' , { debug : true } )
. then ( { debug } = > console . log ( debug ) ) zlFetch direciona todos os erros 400 e 500 para o método catch . Os erros contêm as mesmas informações que uma resposta.
headers : cabeçalhos de respostabody : corpo de respostastatus : status da respostastatusText : texto de status da respostaresponse : resposta original da buscaIsso torna o zlFetch super fácil de usar com promessas.
zlFetch ( 'some-url' ) . catch ( error => {
/* Handle error */
} )
// The above request can be written in Fetch like this:
fetch ( 'some-url' )
. then ( response => {
if ( ! response . ok ) {
Promise . reject ( response . json )
}
} )
. catch ( error => {
/* Handle error */
} )async / await zlFetch permite passar todos os erros para um objeto errors . Você pode fazer isso adicionando uma opção returnError . Isso é útil quando você trabalha muito com async/await .
const { response , error } = await zlFetch ( 'some-url' , { returnError : true } ) Você pode adicionar query ou queries como uma opção e zlFetch criará uma string de consulta para você automaticamente. Use isso com solicitações GET .
zlFetch ( 'some-url' , {
queries : {
param1 : 'value1' ,
param2 : 'to encode' ,
} ,
} )
// The above request can be written in Fetch like this:
fetch ( 'url?param1=value1¶m2=to%20encode' )Content-Type com base no conteúdo body zlFetch define Content-Type apropriadamente, dependendo dos dados do seu body . Ele suporta três tipos de dados:
Se você passar um object , zlFetch definirá Content-Type como application/json . Ele também JSON.stringify seu corpo para que você não precise fazer isso sozinho.
zlFetch . post ( 'some-url' , {
body : { message : 'Good game' } ,
} )
// The above request is equivalent to this
fetch ( 'some-url' , {
method : 'post' ,
headers : { 'Content-Type' : 'application/json' } ,
body : JSON . stringify ( { message : 'Good game' } ) ,
} ) zlFetch contém um auxiliar toObject que permite converter dados de formulário em um objeto. Isso torna muito fácil zlFetch com formulários.
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , {
body : toObject ( data ) ,
} ) Se você passar uma string, zlFetch definirá Content-Type como application/x-www-form-urlencoded .
zlFetch também contém um método toQueryString que pode ajudá-lo a converter objetos em strings de consulta para que você possa usar essa opção facilmente.
import { toQueryString } from 'zl-fetch'
zlFetch . post ( 'some-url' , {
body : toQueryString ( { message : 'Good game' } ) ,
} )
// The above request is equivalent to this
fetch ( 'some-url' , {
method : 'post' ,
headers : { 'Content-Type' : 'application/x-www-form-urlencoded' } ,
body : 'message=Good%20game' ,
} ) Se você passar um Form Data, zlFetch permitirá que a função fetch nativa manipule o Content-Type . Geralmente, isso usará multipart/form-data com as opções padrão. Se você usar isso, certifique-se de que seu servidor possa receber multipart/form-data !
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , { body : data } )
// The above request is equivalent to this
fetch ( 'some-url' , { body : data } )
// Your server should be able to receive multipart/form-data if you do this. If you're using Express, you can a middleware like multer to make this possible:
import multer from 'multer'
const upload = multer ( )
app . use ( upload . array ( ) ) Alteração significativa na v5.0.0 : se você passar um cabeçalho Content-Type , zlFetch não definirá mais o formato do conteúdo do corpo. Esperamos que você consiga transmitir o tipo de dados correto. (Tivemos que fazer isso para dar suporte à nova API mencionada acima).
Se você fornecer ao zlFetch uma propriedade auth , ele gerará um cabeçalho de autorização para você.
Se você passar uma string (geralmente para tokens), isso gerará uma autenticação do portador.
zlFetch ( 'some-url' , { auth : 'token12345' } )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Bearer token12345` } ,
} ) Se você passar um object , zlFetch irá gerar uma autenticação básica para você.
zlFetch ( 'some-url' , {
auth : {
username : 'username'
password : '12345678'
}
} )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Basic ${ btoa ( 'username:12345678' ) } ` }
} ) ; Você pode criar uma instância do zlFetch com opções predefinidas. Isso é muito útil se você precisar enviar solicitações com options ou url semelhantes.
url é obrigatóriooptions é opcional import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )Todas as instâncias também possuem métodos abreviados.
// Shorthand methods
const response = api . get ( /* ... */ )
const response = api . post ( /* ... */ )
const response = api . put ( /* ... */ )
const response = api . patch ( /* ... */ )
const response = api . delete ( /* ... */ ) Novo na v5.0.0
Agora você pode usar uma instância zlFetch sem passar um URL. Isso é útil se você criou uma instância com os endpoints corretos.
import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )Todas as instâncias também possuem métodos abreviados.
// Shorthand methods
const response = api . get ( ) // Without URL, without options
const response = api . get ( 'some-url' ) // With URL, without options
const response = api . post ( 'some-url' , { body : 'message=good+game' } ) // With URL, with options
const response = api . post ( { body : 'message=good+game' } ) // Without URL, with options Se quiser lidar com uma resposta não suportada pelo zlFetch, você pode passar customResponseParser: true nas opções. Isso retorna a resposta de uma solicitação Fetch normal sem nenhum tratamento adicional do zlFetch. Você pode então usar response.json() ou outros métodos que julgar adequados.
const response = await zlFetch ( 'url' , {
customResponseParser : true ,
} )
const data = await response . arrayBuffer ( )
