JavaScript Fetch API giver en intuitiv måde at lave anmodninger fra din applikationsklient, der kører i browseren.
Det er både nemt at bruge og gør brug af moderne JavaScript-syntaks. Denne artikel er en guide til, hvordan du bruger Fetch API.
Indholdsfortegnelse
Hvad er JavaScript Fetch API?
JavaScript Fetch API er en grænseflade, som moderne browsere giver til at lave anmodninger fra frontend. Det giver et alternativ til den ældre AJAX XMLHttpRequest.
Den er tilgængelig som en global funktion kaldet hentning. Når den kaldes med argumenter, returnerer denne funktion et løfte, der løser et svar. Med hentefunktionen kan du lave alle mulige HTTP-anmodninger.
Fordele ved Fetch API frem for andre metoder
- Den har en enklere og mere intuitiv grænseflade, der er nem at lære og bruge. Som et resultat bliver din kode renere, når du bruger Fetch API. XMLHttpRequest er mere kompliceret, og din kode er ikke så ren, som når du bruger Fetch API.
- Det understøtter løfter, som gør dig i stand til at skrive asynkron kode mere rent. XMLHttpRequest understøtter dem ikke; i stedet skal du tilføje tilbagekald til hændelseshandlere. Afhængigt af dine præferencer foretrækker du måske JavaScript Fetch API.
- Det er naturligt understøttet i browseren. Det betyder, at du ikke behøver at tilføje yderligere biblioteker for at fremsætte anmodninger. Yderligere biblioteker vil gøre din JavaScript-pakke større og sænke dit websted.
Brug af Fetch API
Dette afsnit vil dække fremsættelse af forskellige anmodninger ved hjælp af JavaScript Fetch API. For at skrive koden kan du bruge den editor, du foretrækker. Bare sørg for at køre koden i browseren. Jeg vil køre det inde i et script-tag i en HTML-fil.
En simpel GET-anmodning
Først skal vi lære at lave en simpel henvendelse. Koden til at gøre det følger denne struktur:
fetch(url)
Derfor, hvis vi ønskede at hente indlæg fra JSON Placeholder APIville du gøre det som følger:
fetch('https://jsonplaceholder.typicode.com/posts');
Funktionskaldet returnerer et løfte, løser API-svaret eller en fejl, hvis en er blevet stødt på. Derfor vil vi bruge søgeordet afvent for at få adgang til svaret. Men vi kan kun bruge nøgleordet afvent i en asynkron funktion.
Så vi vil indpakke hente-funktionen med en async-funktion og kalde den. Hvis du ikke er bekendt med alt dette, er her en detaljeret guide om Asynkron JavaScript. Uanset hvad, koden:
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
console.log(response);
}
getData();
Hvis du kører koden ovenfor, bør du få følgende output i dit output.
Outputtet indikerer, at hente-funktionen returnerede et Response-objekt. Dette objekt har egenskaber, der inkluderer status, overskrifter og brødtekst. Svardataene gemmes som en JSON-streng i kroppen. Derfor skal vi udtrække strengen og parse JSON for at få dataene som et JavaScript-objekt.
Heldigvis har Response-objektet en praktisk metode kaldet json(). Denne metode læser svarets krop og forsøger at parse strengen som JSON. Det returnerer et løfte, der løses til et objekt, der er parset fra JSON.
Denne metode vil dog rejse en fejl, hvis brødteksten ikke er en gyldig JSON-streng. Derfor bør vi kun parse JSON, hvis svaret har en 200-statuskode.
Så koden til at få indlæg vil være som følger:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts"
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
Kørsel af ovenstående kode vil give følgende resultater:
Dette er en række af hundrede indlæg.
Nogle API-endepunkter kræver overskrifter. Disse overskrifter kan f.eks. bruges til godkendelse. JavaScript Fetch API giver en nem måde at sende headere som en del af anmodningen. Du skal videregive et option-argument til dit hentefunktionskald for at angive overskrifter.
fetch(url, options);
Så vores tidligere eksempel ville nu se sådan ud:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts", {
headers: {
'x-auth': '<your auth token>'
}
}
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
Fordi JSONPlaceholder API ikke kræver en autorisationsheader, vil ovenstående kode fungere som før. Det er dog vigtigt at vide, at muligheden for at sende overskrifter findes.
Indtastning af andre muligheder
Ud over at sende overskrifter ind, kan du videregive mange andre muligheder til hentefunktionen. De to muligheder, du vil passere meget, er anmodningsmetoden og anmodningstekstmuligheder.
Vi vil fremsætte en POST-anmodning til JSONPlaceholder API for at demonstrere, at vi passerer dem begge. Her er koden til at gøre det:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts", {
method: 'POST',
body: JSON.stringify({
title: 'Fetch API',
body: 'Lorem Ipsum',
userId: 1,
})
}
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
I vores options-objekt har vi specificeret den anmodningsmetode, vi ønsker at bruge, og kroppen som egenskaber. For begge egenskaber leverede vi strengargumenter. Vi har angivet strengen ‘POST’ for anmodningsmetoden, da vi ønsker at lave en POST-anmodning. Vi leverede også en JSON-streng til body-egenskaben. Denne JSON-streng dannes ved at strenge et objekt med de nødvendige egenskaber.
Kørsel af denne kode i browseren giver følgende output:
Outputtet er et objekt, der indeholder det ID, vi lige har modtaget fra serveren. Her er en stor ressource for den fulde liste over muligheder, du kan sende ind.
Fejl ved brug af JavaScript Fetch API
#1. Netværksfejl
Når du laver netværksanmodninger, er det almindeligt at støde på fejl. Hent-funktionen returnerer et løfte, der løser resultatet eller afviser, når der er opstået en netværksfejl. Derfor skal vi pakke vores kode ind i en try/catch-blok. At håndtere netværksfejl med ynde.
#2. Andre fejl
Ud over netværksfejl kan du også støde på andre fejl, såsom 404s, 403s og 500s. Hent-funktionen giver ikke en fejl, når sådanne fejl opstår. Derfor skal du tjekke for dem ved at tjekke svarstatuskoden. For eksempel har vi i de foregående eksempler kun forsøgt at parse svarteksten, når statuskoden var 200.
#3. CORS fejl
Andre almindelige fejl, du vil støde på, er CORS-fejl. CORS står for Cross-Origin Resource Sharing. En oprindelse er den unikke kombination af en servers protokol, vært og port. For eksempel kan mit websted køre på localhost, værten, på port 5500, porten og serveret over HTTP, protokollen. Derfor vil oprindelsen af denne hjemmeside være http://localhost:5500.
Det samme websted vil sende en API-anmodning til https://jsonplaceholder.typicode.com API, en anden oprindelse. Derfor deler disse to oprindelser, localhost og JSONPlaceholder, ressourcer. Det er Cross-Origin Resource Sharing. API-serveren skal dog aktivere CORS for at virke. Dette er ikke altid tilfældet. Løsningen til at håndtere sådanne fejl ville være at lave anmodninger gennem en CORS-aktiveret proxyserver.
Browser support
Hent API er en ret moderne funktion. Ifølge CanIUse.comomkring 95 % af globale brugere har browsere, der understøtter det.
Konklusion
JavaScript Fetch API er en syntaktisk bedre og mere elegant måde at skrive frontends, der foretager API-anmodninger. I betragtning af dens begrænsede browserunderstøttelse kan du overveje andre HTTP-klientbiblioteker.
