HENT API I JAVASCRIPT MED EKSEMPLER

JavaScript fetch()> metode, der bruges til at hente ressourcer fra en server. Det returnerer et løfte, der løser til Response-objektet, som indkapsler serverens svar på anmodningen. fetch()> letter både GET-anmodninger, der typisk bruges til at hente data, og STOLPE anmodninger, brugt til at sende data til servere.

Desuden, fetch()> integrerer problemfrit avanceret HTTP funktionaliteter som f.eks Cross-Origin Resource Sharing (CORS) og andre udvidelser, der beriger webudviklingsoplevelsen med forbedret sikkerhed og interoperabilitet.

Bemærk: Fetch API leveres med metoden fetch(), som bruges til at hente data fra forskellige kilder.

Syntaks:

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

Parametre:

URL: Den URL, som anmodningen skal sendes til.
Muligheder: Det er en række ejendomme. Det er en valgfri parameter. Tilgængelige muligheder er:
- Metode: Angiver HTTP-metoden for anmodningen. (kan være GET, POST, PUT eller DELETE)
- Overskrifter
- Legeme: Data, der skal sendes sammen med anmodningen.
- Mode: Angiver anmodningstilstand (f.eks. cors, nocors, samme oprindelse osv.)
- Legitimationsoplysninger : Angiver, om der skal sendes brugerlegitimationsoplysninger (cookies, godkendelsesheadere osv.) med anmodningen

JavaScript fetch()-metodeeksempler

Lad os se på nogle af eksemplerne på hentemetoden. Disse eksempler giver dig en fuldstændig forståelse af hentemetoden i JavaScript.

1 . Få anmodning ved hjælp af Fetch

Dette eksempel viser, hvordan du laver metoden Hent anmodning i hentning.

Bemærk: Uden muligheder vil Fetch altid fungere som en get-anmodning.

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) })

Produktion:

Forklaring:

JS fetch()-funktionen bruges til at sende en GET-anmodning til URL'en https://jsonplaceholder.typicode.com/todos/1. Denne funktion returnerer et løfte, der løses til et svarobjekt, der repræsenterer svaret på anmodningen.
Then()-metoden er kædet til fetch()-kaldet for at håndtere svaret asynkront. Inde i tilbagekaldsfunktionen, der er videregivet til then(), kaldes res.json()-metoden for at parse svarlegemet som JSON. Denne metode returnerer også et løfte, der løser de parsede JSON-data.
En anden then()-metode er kædet til at håndtere de parsede JSON-data. Inde i dens tilbagekaldsfunktion logges de parsede JSON-data d til konsollen ved hjælp af console.log()

2 . Brug af hentning til at sende JSON-data

I dette eksempel har vi uploadet JSON-data ved hjælp af fetch() API'et i JavaScript. Du kan indstille anmodningsteksten til en JSON-strenget version af dine data og indstille de relevante overskrifter til at angive, at du sender JSON.

Indlægsanmodninger kan laves ved hjælp af hentning ved at give følgende muligheder:

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

Efter at have kontrolleret syntaksen for postanmodningen, se på eksemplet nedenfor, som demonstrerer brugen af postanmodning i hentemetoden.

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 =>{ // Tjek, om anmodningen var vellykket, hvis (!response.ok) { throw new Error('Netværkssvar var ikke ok');  } // Parse svaret som JSON returnere response.json();  }) .then(data => { // Håndter JSON-dataene console.log(data); }) .catch(error => { // Håndter eventuelle fejl, der opstod under hentning af console.error('Fetch error: ', fejl);

Forklaring:

Vi definerer dine JSON-data.
Vi konfigurerer muligheder for hentningsanmodningen, herunder metoden sat til 'POST', Content-Type-headeren sat til 'application/json' og brødteksten indstillet til den JSON-strengificerede version af dine data.
Vi laver hentningsanmodningen med de angivne muligheder ved hjælp af fetch()-funktionen.
Resten af koden forbliver den samme som før, og håndterer svaret og eventuelle fejl, der opstår under hentning.

3. Afbrydelse af en hentningsanmodning

Du kan bruge AbortController og Afbryd signalgrænseflade for at afbryde en hentningsanmodning 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(() =>{ controller.abort(); // Afbryd hentningsanmodningen console.log('Hentningsanmodningen fik timeout'); }, 5000); // Håndter henteanmodningen fetchPromise .then(response => { // Tjek, om anmodningen var vellykket, hvis (!response.ok) { throw new Error('Netværkssvar var ikke ok'); } // Parse the svar som JSON returnerer response.json(); fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Ryd timeout });

Forklaring:

Vi opretter en ny AbortController-instans og får dens signal.
Vi laver henteanmodningen ved hjælp af fetch() med de angivne muligheder.
Vi indstiller en timeout på 5 sekunder ved hjælp af setTimeout() til at afbryde henteanmodningen, hvis det tager for lang tid.
Inde i timeout-tilbagekaldet kalder vi controller.abort() for at afbryde henteanmodningen.
Vi håndterer hentningsanmodningen som normalt, herunder parsing af svaret og håndtering af eventuelle fejl.
Til sidst, i finally()-blokken rydder vi timeoutet ved hjælp af clearTimeout() for at forhindre, at timeoutet udløses, hvis hentningsanmodningen fuldføres, inden timeoutet udløber.

Afsendelse af en anmodning inklusive legitimationsoplysninger

For at sende en anmodning inklusive legitimationsoplysninger, som f.eks cookies , i en hentningsanmodning kan du indstille legitimationsegenskaben til at inkludere.

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

Hvis du kun vil sende legitimationsoplysninger, hvis anmodnings-URL'en er på samme oprindelse som det kaldende script, skal du tilføje legitimationsoplysninger: 'same-origin'.

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

JavaScript fetch() Metode Use Cases

Her er nogle af anvendelsesmulighederne for hentemetoden. Dette er almindelige problemer, som begynderudviklere står over for, når de arbejder med hentning.

1. Sådan bruger du JavaScript Fetch API til at hente data

JavaScript Get request bruges til at hente data fra en server. For at bruge Fetch API i JavaScript til at hente data fra en server, kan du lave en GET-anmodning til den ønskede URL og håndtere svaret.

2. Get and Post-metoden ved hjælp af Fetch API

En fetch()-metode kan bruges med enhver type anmodning som f.eks STOLPE , FÅ , SÆTTE, og SLET , GET-metoden bruger hente API

3. Forskel mellem Fetch og Axios for at lave http-anmodninger

Axios er en selvstændig tredjepartspakke, der nemt kan installeres, og Fetch er indbygget i de fleste moderne browsere; ingen installation er påkrævet som sådan.

Understøttede browsere:

JavaScript Fetch er en ECMAScript6 (ES6) funktion og understøttes på næsten alle moderne browsere som: