JavaScript fetch()> metoda, ki se uporablja za pridobivanje virov s strežnika. Vrne obljubo, ki se razreši na objekt Response, ki zajema odgovor strežnika na zahtevo. fetch()> olajša izdelavo zahtev GET, ki se običajno uporabljajo za pridobivanje podatkov, in OBJAVI zahteve, ki se uporabljajo za objavo podatkov na strežnikih.

Poleg tega fetch()> neopazno integrira napredne HTTP funkcionalnosti kot npr Skupna raba virov navzkrižnega izvora (CORS) in druge razširitve, ki obogatijo izkušnjo spletnega razvoja z izboljšano varnostjo in interoperabilnostjo.

Opomba: Fetch API ima metodo fetch(), ki se uporablja za pridobivanje podatkov iz različnih virov.

Sintaksa:

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

Parametri:

• URL: URL, na katerega je treba poslati zahtevo.
• Opcije: Je niz lastnosti. Je an neobvezno parameter. Na voljo so naslednje možnosti:
  • metoda: Podaja metodo HTTP za zahtevo. (lahko GET, POST, PUT ali DELETE)
  • Glave
  • Telo: Podatki, ki jih je treba poslati z zahtevkom.
  • način: Določa način zahteve (npr. cors, nocors, istega izvora itd.)
  • Poverilnice : Določa, ali naj se z zahtevo pošljejo uporabniške poverilnice (piškotki, glave za preverjanje pristnosti itd.)

Primeri metode JavaScript fetch().

Oglejmo si nekaj primerov metode pridobivanja. Ti primeri vam nudijo popolno razumevanje metode pridobivanja v JavaScriptu.

1 . Pridobite zahtevo s funkcijo Fetch

Ta primer prikazuje, kako narediti zahtevo Get v metodi pridobivanja.

Opomba: Brez možnosti bo Fetch vedno deloval kot zahteva za pridobitev.

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

Izhod:

Pojasnilo:

1. Funkcija JS fetch() se uporablja za pošiljanje zahteve GET na URL https://jsonplaceholder.typicode.com/todos/1. Ta funkcija vrne obljubo, ki se razreši v objekt Response, ki predstavlja odgovor na zahtevo.
2. Metoda then() je vezana na klic fetch() za asinhrono obdelavo odgovora. Znotraj funkcije povratnega klica, posredovane then(), se kliče metoda res.json(), da telo odgovora razčleni kot JSON. Ta metoda vrne tudi Promise, ki se razreši v razčlenjene podatke JSON.
3. Druga metoda then() je verižna za obdelavo razčlenjenih podatkov JSON. Znotraj funkcije povratnega klica se razčlenjeni podatki JSON d zabeležijo v konzolo z uporabo console.log()

2 . Uporaba pridobivanja za objavo podatkov JSON

V tem primeru smo naložili podatke JSON z uporabo API-ja fetch() v JavaScriptu, telo zahteve lahko nastavite na različico svojih podatkov v nizu JSON in nastavite ustrezne glave, ki označujejo, da pošiljate JSON.

Zahteve za objavo lahko pošljete s funkcijo pridobivanja tako, da podate spodnje možnosti:

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

Ko preverite sintakso zahteve za objavo, si oglejte spodnji primer, ki prikazuje uporabo zahteve za objavo v metodi pridobivanja.

// 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 =>{ // Preverite, ali je bila zahteva uspešna if (!response.ok) { throw new Error('Odziv omrežja ni bil v redu');  } // Razčleni odgovor kot JSON return response.json();  }) .then(data => { // Obravnava podatkov JSON console.log(data); }) .catch(error => { // Obravnava morebitne napake, ki so se pojavile med pridobivanjem console.error('Napaka pri pridobivanju: ', napaka }); 

Pojasnilo:

• Mi definiramo vaše podatke JSON.
• Nastavimo možnosti za zahtevo za pridobivanje, vključno z metodo, nastavljeno na »POST«, glavo Content-Type, nastavljeno na »application/json«, in telo, nastavljeno na nizno različico vaših podatkov JSON.
• Zahtevo za pridobitev naredimo s podanimi možnostmi s funkcijo fetch().
• Preostali del kode ostaja enak kot prej, obravnava odgovor in vse napake, ki se pojavijo med pridobivanjem.

3. Preklic zahteve za pridobitev

Lahko uporabite AbortController in Vmesnik AbortSignal za prekinitev zahteve za pridobivanje v JavaScriptu.

// 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(() =>{ krmilnik.abort(); // Prekinitev zahteve za pridobitev console.log('Časovna omejitev zahteve za pridobitev je potekla'); }, 5000); // Obravnava zahteve za pridobivanje fetchPromise .then(response => { // Preveri, ali je bila zahteva uspešna if (!response.ok) { throw new Error('Odziv omrežja ni bil v redu'); } // Razčleni odgovor kot JSON return response.json(); }) .then(data => { // Obravnava podatkovne konzole JSON.log(data); }) .catch(error => { // Obravnava morebitnih napak, ki so se pojavile med fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Počisti časovno omejitev }); 

Pojasnilo:

• Ustvarimo nov primerek AbortController in pridobimo njegov signal.
• Zahtevo za pridobivanje izvedemo z uporabo funkcije fetch() s podanimi možnostmi.
• Nastavimo časovno omejitev 5 sekund s funkcijo setTimeout(), da prekinemo zahtevo za pridobivanje, če traja predolgo.
• Znotraj povratnega klica časovne omejitve pokličemo controller.abort(), da prekinemo zahtevo za pridobivanje.
• Zahtevo za pridobivanje obravnavamo kot običajno, vključno z razčlenjevanjem odgovora in obravnavanjem morebitnih napak.
• Nazadnje v bloku finally() počistimo časovno omejitev z uporabo clearTimeout(), da preprečimo sprožitev časovne omejitve, če se zahteva za pridobitev zaključi pred iztekom časovne omejitve.

Pošiljanje zahteve, vključno s poverilnicami

Če želite poslati zahtevo, vključno s poverilnicami, kot je npr piškotki , lahko v zahtevi za pridobivanje nastavite lastnost poverilnic, ki naj bo vključena.

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

Če želite poverilnice poslati le, če je URL zahteve na istem izvoru kot klicni skript, dodajte poverilnice: 'same-origin'.

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

Primeri uporabe metode JavaScript fetch().

Tukaj je nekaj primerov uporabe metode pridobivanja. To so pogoste težave, s katerimi se srečujejo razvijalci začetniki pri delu s funkcijo pridobivanja.

1. Kako uporabljati JavaScript Fetch API za pridobivanje podatkov

Zahteva JavaScript Get se uporablja za pridobivanje podatkov s strežnika. Če želite uporabiti Fetch API v JavaScriptu za pridobivanje podatkov s strežnika, lahko pošljete zahtevo GET na želeni URL in obdelate odgovor.

2. Metoda Get and Post z uporabo API-ja Fetch

Metodo fetch() lahko uporabite s katero koli vrsto zahteve, kot je npr OBJAVI , DOBITI , POSTAVITE, in IZBRIŠI , Metoda GET uporablja API za pridobitev

3. Razlika med Fetch in Axios za izdelovanje zahtev http

Axios je samostojen paket tretje osebe, ki ga je mogoče enostavno namestiti, Fetch pa je vgrajen v večino sodobnih brskalnikov; namestitev kot taka ni potrebna.

Podprti brskalniki:

JavaScript Fetch je ECMAScript6 (ES6) funkcija in je podprta v skoraj vseh sodobnih brskalnikih, kot so:

• Google Chrome
• Edge
• Firefox
• Opera
• Safari