HENT API I JAVASCRIPT MED EKSEMPLER

JavaScript fetch()> metode som brukes for å hente ressurser fra en server. Den returnerer et løfte, som løser til Response-objektet, som innkapsler serverens svar på forespørselen. fetch()> forenkler å lage både GET-forespørsler, vanligvis brukt for å hente data, og POST forespørsler, brukt til å legge ut data til servere.

Dessuten, fetch()> integrerer sømløst avansert HTTP funksjoner som f.eks Cross-Origin Resource Sharing (CORS) og andre utvidelser, som beriker webutviklingsopplevelsen med forbedret sikkerhet og interoperabilitet.

Merk: Fetch API kommer med fetch()-metoden, som brukes til å hente data fra forskjellige kilder.

Syntaks:

fetch('url') // api for the get request .then(response =>response.json()) .then(data => console.log(data));

Parametere:

URL: URL-en som forespørselen skal sendes til.
Alternativer: Det er en rekke eiendommer. Det er en valgfri parameter. Tilgjengelige alternativer er:
- Metode: Angir HTTP-metoden for forespørselen. (kan være GET, POST, PUT eller DELETE)
- Overskrifter
- Kropp: Data som skal sendes med forespørselen.
- Modus: Angir forespørselsmodus (f.eks. cors, nocors, samme opprinnelse, etc)
- Legitimasjon : Spesifiserer om brukerlegitimasjon (informasjonskapsler, autentiseringshoder osv.) skal sendes med forespørselen

JavaScript fetch() Metodeeksempler

La oss se på noen av eksemplene på hentemetoden. Disse eksemplene gir deg en fullstendig forståelse av hentemetoden i JavaScript.

1 . Få forespørsel ved å bruke Fetch

Dette eksemplet viser hvordan du lager Hent forespørsel i henting-metoden.

Merk: Uten alternativer vil Fetch alltid fungere som en get-forespørsel.

Javascript

  // API for get requests let fetchRes = fetch( 'https://jsonplaceholder.typicode.com/todos/1');   // FetchRes is the promise to resolve // it by using.then() method fetchRes.then(res =>res.json()).then(d => { console.log(d) })

Produksjon:

Forklaring:

JS fetch()-funksjonen brukes til å sende en GET-forespørsel til URL-en https://jsonplaceholder.typicode.com/todos/1. Denne funksjonen returnerer et løfte som løses til et Response-objekt som representerer svaret på forespørselen.
Then()-metoden er lenket til fetch()-kallet for å håndtere svaret asynkront. Inne i tilbakeringingsfunksjonen som sendes til then(), kalles res.json()-metoden for å analysere responslegemet som JSON. Denne metoden returnerer også et løfte som løser de analyserte JSON-dataene.
En annen then()-metode er lenket for å håndtere de analyserte JSON-dataene. Inne i tilbakeringingsfunksjonen logges de analyserte JSON-dataene d til konsollen ved å bruke console.log()

2 . Bruker hente for å legge ut JSON-data

I dette eksemplet har vi lastet opp JSON-data ved hjelp av fetch() API i JavaScript. Du kan sette forespørselsteksten til en JSON-strengifisert versjon av dataene dine og angi de riktige overskriftene for å indikere at du sender JSON.

Postforespørsler kan gjøres ved å bruke henting ved å angi alternativene nedenfor:

let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }

Etter å ha sjekket syntaksen til postforespørselen, se på eksemplet nedenfor som viser bruk av postforespørsel i hentingsmetoden.

Javascript

  // Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = {  method: 'POST',  headers: {  'Content-Type': 'application/json' // Set content type to JSON  },  body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options)  .then(response =>{ // Sjekk om forespørselen var vellykket hvis (!response.ok) { throw new Error('Nettverkssvar var ikke ok');  } // Parse svaret som JSON returnere respons.json();  }) .then(data => { // Håndter JSON-dataene console.log(data); }) .catch(error => { // Håndter eventuelle feil som oppstod under hentingen console.error('Fetch error: ', feil);

Forklaring:

Vi definerer JSON-dataene dine.
Vi setter opp alternativer for henteforespørselen, inkludert metoden satt til 'POST', Content-Type-overskriften satt til 'application/json', og brødteksten satt til JSON-strengversjonen av dataene dine.
Vi foretar hentingsforespørselen med de angitte alternativene ved å bruke fetch()-funksjonen.
Resten av koden forblir den samme som før, og håndterer svaret og eventuelle feil som oppstår under hentingen.

3. Avbryte en hentingsforespørsel

Du kan bruke AbortController og Avbryt signalgrensesnitt for å avbryte en hentingsforespørsel i JavaScript.

Javascript

  // Create a new AbortController instance const controller = new AbortController(); const signal = controller.signal; // Make the fetch request with the signal const fetchPromise = fetch('https://api.example.com/data', { signal }); // Timeout after 5 seconds const timeoutId = setTimeout(() =>{ kontroller.avbryt(); // Avbryt henteforespørselen console.log('Hentingsforespørsel ble tidsavbrutt'); }, 5000); // Håndter henteforespørselen fetchPromise .then(response => { // Sjekk om forespørselen var vellykket hvis (!response.ok) { throw new Error('Nettverkssvaret var ikke ok'); } // Parse the respons som JSON returnerer response.json(); fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Fjern tidsavbruddet });

Forklaring:

Vi oppretter en ny AbortController-forekomst og får signalet.
Vi gjør henteforespørselen ved å bruke fetch() med de angitte alternativene.
Vi setter en timeout på 5 sekunder ved å bruke setTimeout() for å avbryte henteforespørselen hvis det tar for lang tid.
Innenfor timeout-tilbakekallingen kaller vi controller.abort() for å avbryte henteforespørselen.
Vi håndterer hentingsforespørselen som vanlig, inkludert analysering av svaret og håndtering av eventuelle feil.
Til slutt, i finally()-blokken, fjerner vi tidsavbruddet ved å bruke clearTimeout() for å forhindre at tidsavbruddet utløses hvis henteforespørselen fullføres før tidsavbruddet utløper.

Sende en forespørsel inkludert legitimasjon

For å sende en forespørsel inkludert legitimasjon, som f.eks informasjonskapsler , i en hentingsforespørsel kan du angi at legitimasjonsegenskapen skal inkluderes.

fetch('https://example.com', { credentials: 'include', });

Hvis du bare vil sende legitimasjon hvis forespørsels-URLen er på samme opprinnelse som kalleskriptet, legger du til legitimasjon: «same-origin».

// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });

JavaScript fetch() Brukstilfeller for metode

Her er noen av brukstilfellene for hentemetoden. Dette er vanlige problemer som nybegynnerutviklere møter når de jobber med henting.

1. Hvordan bruke JavaScript Fetch API for å hente data

JavaScript Get request brukes til å hente data fra en server. For å bruke Fetch API i JavaScript for å hente data fra en server, kan du lage en GET-forespørsel til ønsket URL og håndtere svaret.

2. Hent og post-metoden ved hjelp av Fetch API

En fetch()-metode kan brukes med alle typer forespørsel, som f.eks POST , FÅ , SETTE, og SLETT , GET-metoden bruker hente-API

3. Forskjellen mellom Fetch og Axios for å lage http-forespørsler

Axios er en frittstående tredjepartspakke som enkelt kan installeres og Fetch er innebygd i de fleste moderne nettlesere; ingen installasjon er nødvendig som sådan.

Støttede nettlesere:

JavaScript Fetch er en ECMAScript6 (ES6) funksjonen og støttes på nesten alle moderne nettlesere som: