zl fetch
v6.0.6
zlFetch est un wrapper autour de la récupération qui vous offre un moyen pratique de faire des requêtes.
Ses fonctionnalités sont les suivantes :
Améliorations de la qualité de vie par rapport à la fonction fetch native
response.json() , response.text() ou response.blob()catch .await — des erreurs peuvent être renvoyées afin que vous n'ayez pas à écrire un bloc try/catch . Améliorations supplémentaires par rapport à la fonction fetch native
Content-Type sont définis automatiquement en fonction du contenu body .headers , body , status et bien plus encore.GET , POST , PUT , PATCH et DELETEauth . Remarque : zlFetch est une bibliothèque ESM depuis v4.0.0 .
# Installing through npm
npm install zl-fetch --saveEnsuite, vous pouvez l'utiliser en l'important dans votre fichier JavaScript.
import zlFetch from 'zl-fetch'zlFetch sans npm :Vous pouvez importer zlFetch directement dans JavaScript via un CDN.
Pour ce faire, vous devez d'abord définir le type de votre script sur module , puis importer zlFetch .
< script type =" module " >
import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script > Vous pouvez utiliser zlFetch comme une fonction fetch normale. La seule différence est que vous n'avez plus besoin d'écrire une méthode response.json ou response.text !
zlFetch le gère automatiquement pour vous afin que vous puissiez utiliser directement votre réponse.
zlFetch ( 'url' )
. then ( response => console . log ( response ) )
. catch ( error => console . log ( error ) )zlFetch contient des méthodes abrégées pour ces méthodes REST courantes afin que vous puissiez les utiliser rapidement.
zlFetch . get ( /* some-url */ )
zlFetch . post ( /* some-url */ )
zlFetch . put ( /* some-url */ )
zlFetch . patch ( /* some-url */ )
zlFetch . delete ( /* some-url */ ) zlFetch prend en charge les types de réponse json , text et blob vous n'avez donc pas besoin d'écrire response.json() , response.text() ou response.blob() .
Les autres types de réponses ne sont pas pris en charge pour le moment. Si vous devez prendre en charge d'autres types de réponses, envisagez d'utiliser votre propre gestionnaire de réponses
zlFetch vous envoie toutes les données dont vous avez besoin dans l'objet response . Cela comprend les éléments suivants :
headers : en-têtes de réponsebody : corps de réponsestatus : état de la réponsestatusText : texte d'état de la réponseresponse : réponse originale de Fetch Nous faisons cela pour que vous n'ayez pas à rechercher vous-même les headers , status , statusText ou même le reste de l'objet response .
Nouveau dans v4.0.0 : Vous pouvez déboguer l'objet requête en ajoutant une option debug . Cela révélera un objet debug contenant la requête en cours de construction.
urlmethodheadersbody zlFetch ( 'url' , { debug : true } )
. then ( { debug } = > console . log ( debug ) ) zlFetch dirige toutes les erreurs 400 et 500 vers la méthode catch . Les erreurs contiennent les mêmes informations qu'une réponse.
headers : en-têtes de réponsebody : corps de réponsestatus : état de la réponsestatusText : texte d'état de la réponseresponse : réponse originale de fetchCela rend zlFetch super facile à utiliser avec des promesses.
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 vous permet de transmettre toutes les erreurs dans un objet errors . Vous pouvez le faire en ajoutant une option returnError . Ceci est utile lorsque vous travaillez beaucoup avec async/await .
const { response , error } = await zlFetch ( 'some-url' , { returnError : true } ) Vous pouvez ajouter query ou queries en option et zlFetch créera automatiquement une chaîne de requête pour vous. Utilisez-le avec les requêtes 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 basée sur le contenu body zlFetch définit Content-Type de manière appropriée en fonction de vos données body . Il prend en charge trois types de données :
Si vous transmettez un object , zlFetch définira Content-Type sur application/json . Il JSON.stringify également votre corps afin que vous n'ayez pas à le faire vous-même.
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 contient un assistant toObject qui vous permet de convertir les données de formulaire en objet. Cela rend très facile la récupération de zlFetch avec des formulaires.
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , {
body : toObject ( data ) ,
} ) Si vous transmettez une chaîne, zlFetch définira Content-Type sur application/x-www-form-urlencoded .
zlFetch contient également une méthode toQueryString qui peut vous aider à convertir des objets en chaînes de requête afin que vous puissiez utiliser cette option facilement.
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' ,
} ) Si vous transmettez des données de formulaire, zlFetch laissera la fonction fetch native gérer le Content-Type . Généralement, cela utilisera multipart/form-data avec les options par défaut. Si vous l'utilisez, assurez-vous que votre serveur peut recevoir 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 ( ) ) Breaking Change dans v5.0.0 : Si vous transmettez un en-tête Content-Type , zlFetch ne définira plus le format du contenu de votre corps. Nous espérons que vous serez en mesure de transmettre le type de données correct. (Nous avons dû le faire pour prendre en charge la nouvelle API mentionnée ci-dessus).
Si vous fournissez à zlFetch une propriété auth , il générera un en-tête d'autorisation pour vous.
Si vous transmettez une string (généralement pour les jetons), cela générera une authentification au porteur.
zlFetch ( 'some-url' , { auth : 'token12345' } )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Bearer token12345` } ,
} ) Si vous transmettez un object , zlFetch générera une authentification de base pour vous.
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' ) } ` }
} ) ; Vous pouvez créer une instance de zlFetch avec des options prédéfinies. Ceci est très utile si vous devez envoyer des demandes avec options ou url similaires.
url est obligatoireoptions sont facultatives import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )Toutes les instances ont également des méthodes abrégées.
// Shorthand methods
const response = api . get ( /* ... */ )
const response = api . post ( /* ... */ )
const response = api . put ( /* ... */ )
const response = api . patch ( /* ... */ )
const response = api . delete ( /* ... */ ) Nouveau dans v5.0.0
Vous pouvez désormais utiliser une instance zlFetch sans transmettre d'URL. Ceci est utile si vous avez créé une instance avec les bons points de terminaison.
import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )Toutes les instances ont également des méthodes abrégées.
// 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 Si vous souhaitez gérer une réponse non prise en charge par zlFetch, vous pouvez passer customResponseParser: true dans les options. Cela renvoie la réponse d'une requête Fetch normale sans aucun traitement supplémentaire de zlFetch. Vous pouvez ensuite utiliser response.json() ou d’autres méthodes comme bon vous semble.
const response = await zlFetch ( 'url' , {
customResponseParser : true ,
} )
const data = await response . arrayBuffer ( )
