zl fetch
v6.0.6
zlFetch ist ein Wrapper für Fetch, der Ihnen eine bequeme Möglichkeit bietet, Anfragen zu stellen.
Seine Funktionen sind wie folgt:
Verbesserungen der Lebensqualität gegenüber der nativen fetch
response.json() , response.text() oder response.blob() zu verwenden.catch -Block weitergeleitet.await – Fehler können zurückgegeben werden, sodass Sie keinen try/catch -Block schreiben müssen. Zusätzliche Verbesserungen gegenüber der nativen fetch
Content-Type Header werden automatisch basierend auf dem body festgelegt.headers , body , status und mehr.GET , POST , PUT , PATCH und DELETEauth Eigenschaft. Hinweis: zlFetch ist seit v4.0.0 eine ESM-Bibliothek.
# Installing through npm
npm install zl-fetch --saveAnschließend können Sie es verwenden, indem Sie es in Ihre JavaScript-Datei importieren.
import zlFetch from 'zl-fetch'zlFetch ohne npm :Sie können zlFetch über ein CDN direkt in JavaScript importieren.
Dazu müssen Sie zunächst den Typ Ihres script auf module festlegen und dann zlFetch importieren.
< script type =" module " >
import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script > Sie können zlFetch wie eine normale fetch verwenden. Der einzige Unterschied besteht darin, dass Sie keine response.json oder response.text -Methode mehr schreiben müssen!
zlFetch erledigt dies automatisch für Sie, sodass Sie Ihre Antwort direkt verwenden können.
zlFetch ( 'url' )
. then ( response => console . log ( response ) )
. catch ( error => console . log ( error ) )zlFetch enthält Kurzmethoden für diese gängigen REST-Methoden, sodass Sie sie schnell verwenden können.
zlFetch . get ( /* some-url */ )
zlFetch . post ( /* some-url */ )
zlFetch . put ( /* some-url */ )
zlFetch . patch ( /* some-url */ )
zlFetch . delete ( /* some-url */ ) zlFetch unterstützt die Antworttypen json , text und blob sodass Sie nicht response.json() , response.text() oder response.blob() schreiben müssen.
Andere Antworttypen werden derzeit nicht unterstützt. Wenn Sie andere Antworttypen unterstützen müssen, sollten Sie die Verwendung eines eigenen Antworthandlers in Betracht ziehen
zlFetch sendet Ihnen alle benötigten Daten im response . Dazu gehört Folgendes:
headers : Antwortheaderbody : Antworttextstatus : AntwortstatusstatusText : Antwortstatustextresponse : Originalantwort von Fetch Wir tun dies, damit Sie die headers , status , statusText oder sogar den Rest des response nicht selbst herausfischen müssen.
Neu in v4.0.0 : Sie können das Anforderungsobjekt debuggen, indem Sie eine debug -Option hinzufügen. Dadurch wird ein debug -Objekt angezeigt, das die zu erstellende Anforderung enthält.
urlmethodheadersbody zlFetch ( 'url' , { debug : true } )
. then ( { debug } = > console . log ( debug ) ) zlFetch leitet alle 400- und 500-Fehler an die catch -Methode weiter. Fehler enthalten dieselben Informationen wie eine Antwort.
headers : Antwortheaderbody : Antworttextstatus : AntwortstatusstatusText : Antwortstatustextresponse : Originalantwort vom AbrufDies macht die Verwendung von zlFetch mit Versprechen sehr einfach.
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 Mit zlFetch können Sie alle Fehler an ein errors übergeben. Sie können dies tun, indem Sie eine returnError -Option hinzufügen. Dies ist nützlich, wenn Sie viel mit async/await arbeiten.
const { response , error } = await zlFetch ( 'some-url' , { returnError : true } ) Sie können optional eine oder queries query hinzufügen und zlFetch erstellt automatisch eine Abfragezeichenfolge für Sie. Verwenden Sie dies mit GET -Anfragen.
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 basierend auf dem body zlFetch legt Content-Type abhängig von Ihren body entsprechend fest. Es unterstützt drei Arten von Daten:
Wenn Sie ein object übergeben, setzt zlFetch Content-Type auf application/json . Außerdem wird Ihr Körper JSON.stringify , sodass Sie es nicht selbst tun müssen.
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 enthält einen toObject Helfer, mit dem Sie Formulardaten in ein Objekt konvertieren können. Dies macht es super einfach, zlFetch mit Formularen durchzuführen.
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , {
body : toObject ( data ) ,
} ) Wenn Sie eine Zeichenfolge übergeben, setzt zlFetch Content-Type auf application/x-www-form-urlencoded .
zlFetch enthält außerdem eine toQueryString -Methode, die Ihnen beim Konvertieren von Objekten in Abfragezeichenfolgen helfen kann, sodass Sie diese Option problemlos verwenden können.
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' ,
} ) Wenn Sie Formulardaten übergeben, lässt zlFetch die native fetch den Content-Type verarbeiten. Im Allgemeinen werden dabei multipart/form-data mit den Standardoptionen verwendet. Wenn Sie dies verwenden, stellen Sie sicher, dass Ihr Server multipart/form-data empfangen kann!
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 in v5.0.0 : Wenn Sie einen Content-Type Header übergeben, legt zlFetch das Format Ihres Textinhalts nicht mehr fest. Wir erwarten, dass Sie den richtigen Datentyp übergeben können. (Wir mussten dies tun, um die oben erwähnte neue API zu unterstützen).
Wenn Sie zlFetch eine auth bereitstellen, wird ein Autorisierungsheader für Sie generiert.
Wenn Sie eine string übergeben (normalerweise für Token), wird eine Bearer-Authentifizierung generiert.
zlFetch ( 'some-url' , { auth : 'token12345' } )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Bearer token12345` } ,
} ) Wenn Sie ein object übergeben, generiert zlFetch eine Basisauthentifizierung für Sie.
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' ) } ` }
} ) ; Sie können eine Instanz von zlFetch mit vordefinierten Optionen erstellen. Dies ist sehr hilfreich, wenn Sie Anfragen mit ähnlichen options oder url senden müssen.
url ist erforderlichoptions sind optional import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )Alle Instanzen verfügen auch über Kurzschriftmethoden.
// Shorthand methods
const response = api . get ( /* ... */ )
const response = api . post ( /* ... */ )
const response = api . put ( /* ... */ )
const response = api . patch ( /* ... */ )
const response = api . delete ( /* ... */ ) Neu in v5.0.0
Sie können jetzt eine zlFetch Instanz verwenden, ohne eine URL zu übergeben. Dies ist nützlich, wenn Sie eine Instanz mit den richtigen Endpunkten erstellt haben.
import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )Alle Instanzen verfügen auch über Kurzschriftmethoden.
// 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 Wenn Sie eine Antwort verarbeiten möchten, die von zlFetch nicht unterstützt wird, können Sie customResponseParser: true in die Optionen übergeben. Dies gibt die Antwort einer normalen Abrufanforderung ohne zusätzliche Behandlungen von zlFetch zurück. Sie können dann je nach Bedarf response.json() oder andere Methoden verwenden.
const response = await zlFetch ( 'url' , {
customResponseParser : true ,
} )
const data = await response . arrayBuffer ( )
