JavaScript fetch()> metodă utilizată pentru preluarea resurselor de pe un server. Returnează o Promisiune, rezolvându-se la obiectul Răspuns, care încapsulează răspunsul serverului la cerere. fetch()> facilitează efectuarea atât de cereri GET, utilizate de obicei pentru preluarea datelor, cât și POST cereri, utilizate pentru postarea datelor pe servere.

În plus, fetch()> integrează perfect avansate HTTP funcționalități precum Partajarea resurselor între origini (CORS) și alte extensii, îmbogățind experiența de dezvoltare web cu securitate și interoperabilitate îmbunătățite.

Notă: Fetch API vine cu metoda fetch(), care este folosită pentru a prelua date din diferite surse.

Sintaxă:

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

Parametri:

• URL: Adresa URL la care urmează să fie făcută cererea.
• Opțiuni: Este o serie de proprietăți. Este un opțional parametru. Opțiunile disponibile sunt:
  • Metodă: Specifică metoda HTTP pentru cerere. (poate fi GET, POST, PUT sau DELETE)
  • Anteturi
  • Corp: Datele care urmează să fie transmise odată cu cererea.
  • Mod: Specifică modul de solicitare (de ex. cors, nocors, de aceeași origine, etc)
  • Acreditări : Specifică dacă se trimit acreditările utilizatorului (cookie-uri, anteturi de autentificare etc.) împreună cu cererea

Exemple de metode JavaScript fetch().

Să ne uităm la câteva dintre exemplele metodei fetch. Aceste exemple vă oferă o înțelegere completă a metodei de preluare în JavaScript.

1 . Obțineți cerere folosind Fetch

Acest exemplu arată cum să faceți cererea Get în metoda de preluare.

Notă: Fără opțiuni, Fetch va acționa întotdeauna ca o solicitare de obținere.

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

Ieșire:

Explicaţie:

1. Funcția JS fetch() este utilizată pentru a trimite o solicitare GET la adresa URL https://jsonplaceholder.typicode.com/todos/1. Această funcție returnează o Promisiune care se rezolvă într-un obiect Response reprezentând răspunsul la cerere.
2. Metoda then() este legată de apelul fetch() pentru a gestiona răspunsul în mod asincron. În interiorul funcției de apel invers transmisă la then(), metoda res.json() este apelată pentru a analiza corpul răspunsului ca JSON. Această metodă returnează, de asemenea, o Promisiune care se rezolvă la datele JSON analizate.
3. O altă metodă then() este înlănțuită pentru a gestiona datele JSON analizate. În cadrul funcției de apel invers, datele JSON analizate d sunt înregistrate în consolă folosind console.log()

2 . Folosind fetch pentru a posta date JSON

În acest exemplu, am încărcat date JSON utilizând API-ul fetch() în JavaScript, puteți seta corpul cererii la o versiune JSON a datelor dvs. și puteți seta anteturile corespunzătoare pentru a indica faptul că trimiteți JSON.

Solicitările de postare pot fi făcute folosind fetch, oferind opțiunile de mai jos:

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

După ce verificați Sintaxa solicitării de postare, uitați-vă la exemplul de mai jos care demonstrează utilizarea solicitării de postare în metoda de preluare.

// 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 =>{ // Verificați dacă cererea a avut succes dacă (!response.ok) { throw new Error('Răspunsul în rețea nu a fost ok');  } // Analizează răspunsul ca JSON return response.json();  }) .then(data => { // Gestionați datele JSON console.log(data); }) .catch(error => { // Gestionați orice erori care au apărut în timpul extragerii console.error('Fetch error: ', eroare);>>>   
    Explicaţie:     
  
 
 Noi definim datele dvs. JSON.  
 
 Am configurat opțiuni pentru cererea de preluare, inclusiv metoda setată la „POST”, antetul Content-Type setat la „application/json” și corpul setat la versiunea JSON a datelor tale.  
 
 Efectuăm cererea de preluare cu opțiunile furnizate folosind funcția fetch().  
 
 Restul codului rămâne același ca înainte, gestionând răspunsul și orice erori care apar în timpul preluării.  
 
 
    3.     Anularea unei cereri de preluare  
 
 Puteți folosi     AbortController     și     Interfață AbortSignal     pentru a anula o solicitare de preluare în JavaScript.  
Javascript { controller.abort(); // Anulează cererea de preluare console.log('Solicitarea de preluare a expirat'); }, 5000); // Gestionați cererea de preluare fetchPromise .then(response => { // Verificați dacă cererea a avut succes dacă (!response.ok) { throw new Error('Răspunsul în rețea nu a fost ok'); } // Analizați răspunsul ca JSON returnează response.json(); fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Șterge timeout });>>>   
    Explicaţie:     
  
 
 Creăm o nouă instanță AbortController și obținem semnalul acesteia.  
 
 Efectuăm cererea de preluare folosind fetch() cu opțiunile furnizate.  
 
 Am stabilit un timeout de 5 secunde folosind setTimeout() pentru a anula cererea de preluare dacă durează prea mult.  
 
 În cadrul callback-ului timeout, apelăm controller.abort() pentru a anula cererea de preluare.  
 
 Tratăm cererea de preluare ca de obicei, inclusiv analizarea răspunsului și gestionarea eventualelor erori.  
 
 În cele din urmă, în blocul finally(), ștergem timeout-ul folosind clearTimeout() pentru a preveni declanșarea timeout-ului dacă cererea de preluare se finalizează înainte de expirarea timeout-ului.  
 
 
 Trimiterea unei cereri, inclusiv acreditările  
 
 Pentru a trimite o solicitare care include acreditări, cum ar fi      cookie-uri      , într-o solicitare de preluare, puteți seta proprietatea acreditărilor să includă.  
  
fetch('https://example.com', { credentials: 'include', }); 
   
 Dacă doriți să trimiteți acreditări numai dacă adresa URL a solicitării este pe aceeași origine cu scriptul de apelare, adăugați acreditări: „same-origin”.  
   
 Cazuri de utilizare a metodei JavaScript fetch().  
 
 Iată câteva dintre cazurile de utilizare ale metodei fetch. Acestea sunt probleme comune cu care se confruntă dezvoltatorii începători atunci când lucrează cu fetch.  
  
 1.   Cum să utilizați JavaScript Fetch API pentru a obține date   
 
 Solicitarea JavaScript Get este utilizată pentru a prelua date de pe un server. Pentru a utiliza API-ul Fetch în JavaScript pentru a obține date de la un server, puteți face o solicitare GET la adresa URL dorită și puteți gestiona răspunsul.  
  
 2.   Metoda Obțineți și Postați folosind API-ul Fetch   
 
 O metodă fetch() poate fi utilizată cu orice tip de solicitare, cum ar fi     POST     ,     OBȚINE     ,     A PUNE,     și     ȘTERGE     ,     Metoda GET folosește fetch API     
  
 3.   Diferența dintre Fetch și Axios pentru a face solicitări http   
 
 Axios este un pachet autonom de la terți, care poate fi instalat cu ușurință, iar Fetch este încorporat în majoritatea browserelor moderne; nu este necesară nicio instalare ca atare.  
  
    Browsere acceptate:     
  
 JavaScript Fetch este un     ECMAScript6 (ES6)     caracteristică și este acceptată pe aproape toate browserele moderne, cum ar fi:  
  
 
  Google Chrome   
 
  Margine       
 
  Firefox   
 
  Operă   
 
  Safari