JavaScript Fetch API forklart

by
Tweet
Share
Share
Pin
0 Shares

JavaScript Fetch API tilbyr en brukervennlig metode for å sende forespørsler fra applikasjonsklienten din, direkte fra nettleseren.

Den er enkel å bruke og benytter moderne JavaScript-syntaks. Denne veiledningen viser hvordan du effektivt bruker Fetch API.

Hva er JavaScript Fetch API?

JavaScript Fetch API er et grensesnitt som moderne nettlesere tilbyr for å utføre forespørsler fra frontenden. Det fungerer som et alternativ til den eldre AJAX XMLHttpRequest.

Det er tilgjengelig som en global funksjon, kalt `fetch`. Når denne funksjonen kalles med argumenter, returnerer den et promise som fullføres med et svar. Med `fetch`-funksjonen kan du generere ulike typer HTTP-forespørsler.

Fordeler med Fetch API fremfor andre metoder

  • Det har et enkelt og mer intuitivt grensesnitt, som er lett å lære og anvende. Dette gjør koden din renere når du bruker Fetch API. XMLHttpRequest er mer kompleks, og koden blir ikke like oversiktlig som ved bruk av Fetch API.
  • Det understøtter promises, som gir deg mulighet til å skrive asynkron kode på en mer strukturert måte. XMLHttpRequest mangler denne støtten; i stedet må du legge til callbacks til hendelsesbehandlere. Valget mellom Fetch API og andre metoder avhenger av dine preferanser.
  • Det er innebygd i nettleseren, noe som betyr at du ikke trenger å legge til ekstra biblioteker for å sende forespørsler. Ytterligere biblioteker kan øke størrelsen på JavaScript-pakken og redusere hastigheten på nettstedet ditt.

Bruk av Fetch API

Denne delen går gjennom hvordan du kan lage forskjellige forespørsler ved hjelp av JavaScript Fetch API. Du kan benytte den kodeeditoren du foretrekker. Pass på at du kjører koden i nettleseren. Jeg vil demonstrere dette i en script-tag i en HTML-fil.

En enkel GET-forespørsel

Vi starter med å lage en grunnleggende forespørsel. Koden for dette følger denne strukturen:

fetch(url)

For å hente innlegg fra JSON Placeholder API, gjør du følgende:

fetch('https://jsonplaceholder.typicode.com/posts');

Funksjonskallet returnerer et promise, som fullføres med API-svaret eller en feilmelding dersom en oppstår. For å få tilgang til svaret, bruker vi `await`-nøkkelordet. Men `await` kan kun brukes i en asynkron funksjon.

Vi pakker derfor `fetch`-funksjonen inn i en asynkron funksjon og kaller den. Hvis du er usikker på hva dette betyr, finnes det omfattende guider om asynkron JavaScript. Uansett, her er koden:

async function getData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    console.log(response);
}

getData();

Hvis du kjører koden ovenfor, vil du se følgende utskrift i konsollen din:

Utskriften indikerer at `fetch`-funksjonen returnerte et Response-objekt. Dette objektet har egenskaper som status, overskrifter og brødtekst. Responsdataene lagres som en JSON-streng i brødteksten. Derfor må vi hente ut strengen og analysere JSON for å få dataene som et JavaScript-objekt.

Heldigvis har Response-objektet en nyttig metode kalt `json()`. Denne metoden leser svarets brødtekst og forsøker å analysere strengen som JSON. Den returnerer et promise som fullføres med et objekt analysert fra JSON.

Denne metoden vil imidlertid gi en feilmelding dersom brødteksten ikke er en gyldig JSON-streng. Derfor bør vi kun analysere JSON hvis svaret har en 200 statuskode.

Koden for å hente innlegg vil se slik ut:

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("Noe gikk galt:", response.status);
    }
}
getData();

Å kjøre koden over vil gi følgende resultat:

Dette er en array med hundre innlegg.

Noen API-endepunkter krever overskrifter. Disse kan for eksempel brukes for autorisasjon. JavaScript Fetch API gir en enkel måte å sende overskrifter som en del av forespørselen. For å spesifisere overskrifter, må du sende et `options`-argument til `fetch`-funksjonen.

fetch(url, options);

Vårt forrige eksempel vil nå se slik ut:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             headers: {
                 'x-auth': '<din auth token>'
             }
         }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Noe gikk galt:", response.status);
    }
}
getData();

Fordi JSONPlaceholder API ikke krever en autorisasjons-overskrift, vil koden over fungere som før. Det er likevel viktig å vite at muligheten for å sende overskrifter eksisterer.

Innlevering av andre alternativer

I tillegg til overskrifter, kan du sende andre alternativer til `fetch`-funksjonen. De to alternativene du oftest bruker er forespørselsmetoden og forespørselstekstalternativene.

Vi vil demonstrere bruken av disse alternativene ved å sende en POST-forespørsel til JSONPlaceholder API. Her er koden for dette:

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("Noe gikk galt:", response.status);
    }
}
getData();

I `options`-objektet har vi spesifisert forespørselsmetoden og brødteksten. For begge disse har vi oppgitt strengargumenter. Vi har oppgitt strengen «POST» for forespørselsmetoden, siden vi ønsker å lage en POST-forespørsel. Vi har også angitt en JSON-streng for `body`-egenskapen. Denne JSON-strengen dannes ved å stringifisere et objekt med de nødvendige egenskapene.

Å kjøre denne koden i nettleseren gir følgende utdata:

Utskriften er et objekt som inneholder ID-en vi nettopp mottok fra serveren. Her er en detaljert ressurs for en fullstendig oversikt over alternativer du kan sende.

Feil ved bruk av JavaScript Fetch API

#1. Nettverksfeil

Ved nettverksforespørsler er det vanlig å oppleve feil. `fetch`-funksjonen returnerer et promise som fullføres med resultatet eller avvises dersom en nettverksfeil har oppstått. Derfor må vi pakke koden vår inn i en `try/catch`-blokk for å håndtere nettverksfeil på en god måte.

#2. Andre feil

I tillegg til nettverksfeil kan du også oppleve andre feil, som 404, 403 og 500. `fetch`-funksjonen gir ingen feil når slike feil oppstår. Derfor må du sjekke for dem ved å kontrollere svarstatuskoden. I de tidligere eksemplene har vi for eksempel kun forsøkt å analysere svarteksten dersom statuskoden var 200.

#3. CORS-feil

En annen vanlig feil er CORS-feil. CORS står for Cross-Origin Resource Sharing. En origin er den unike kombinasjonen av en servers protokoll, vert og port. For eksempel kan mitt nettsted kjøres på localhost som vert, på port 5500 og serveres over HTTP som protokoll. Derfor vil opprinnelsen til nettstedet være http://localhost:5500.

Det samme nettstedet kan sende en API-forespørsel til https://jsonplaceholder.typicode.com API, som er en annen opprinnelse. Dermed deler disse to opprinnelsene ressurser, dette kalles Cross-Origin Resource Sharing. API-serveren må imidlertid aktivere CORS for at dette skal fungere. Dette er ikke alltid tilfelle. Løsningen for å håndtere slike feil vil være å sende forespørsler via en CORS-aktivert proxy-server.

Nettleserstøtte

Fetch API er en relativt moderne funksjon. Ifølge CanIUse.com har rundt 95 % av alle brukere nettlesere som støtter det.

Konklusjon

JavaScript Fetch API er en syntaktisk bedre og mer elegant måte å skrive grensesnitt som sender API-forespørsler. På grunn av den begrensede nettleserstøtten, kan du vurdere andre HTTP-klientbiblioteker.