IELĀDĒT API JAVASCRIPT AR PIEMĒRIEM

JavaScript fetch()> metode, ko izmanto resursu izgūšanai no servera. Tas atgriež solījumu, atrisinot atbildes objektu, kas iekapsulē servera atbildi uz pieprasījumu. fetch()> atvieglo gan GET pieprasījumu iesniegšanu, ko parasti izmanto datu iegūšanai, gan POSTĪT pieprasījumi, ko izmanto datu ievietošanai serveros.

Turklāt fetch()> nemanāmi integrē uzlabotās HTTP tādas funkcijas kā Vairāku izcelsmes resursu koplietošana (CORS) un citi paplašinājumi, bagātinot tīmekļa izstrādes pieredzi ar uzlabotu drošību un savietojamību.

Piezīme. Programmā Fetch API ir iekļauta metode fetch(), kas tiek izmantota datu izgūšanai no dažādiem avotiem.

Sintakse:

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

Parametri:

URL: URL, uz kuru jānosūta pieprasījums.
Iespējas: Tas ir īpašību klāsts. Tas ir an neobligāti parametrs. Pieejamās iespējas ir:
- Metode: Norāda pieprasījuma HTTP metodi. (var būt GET, POST, PUT vai DELETE)
- Virsraksti
- Pamatteksts: Dati, kas jānosūta kopā ar pieprasījumu.
- Režīms: Norāda pieprasījuma režīmu (piem. cors, nocors, vienas izcelsmes utt)
- Akreditācijas dati : norāda, vai kopā ar pieprasījumu jānosūta lietotāja akreditācijas dati (sīkfaili, autentifikācijas galvenes utt.).

JavaScript fetch() metodes piemēri

Apskatīsim dažus iegūšanas metodes piemērus. Šie piemēri sniedz jums pilnīgu izpratni par JavaScript ielādes metodi.

1 . Saņemiet pieprasījumu, izmantojot funkciju Fetch

Šis piemērs parāda, kā iegūt pieprasījumu ieneses metodē.

Piezīme: Ja nav opciju, funkcija Fetch vienmēr darbosies kā saņemšanas pieprasījums.

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

Izvade:

Paskaidrojums:

Funkcija JS fetch() tiek izmantota, lai nosūtītu GET pieprasījumu uz vietrādi URL https://jsonplaceholder.typicode.com/todos/1. Šī funkcija atgriež solījumu, kas atrisina atbildes objektu, kas atspoguļo atbildi uz pieprasījumu.
Metode then() ir savienota ar izsaukumu fetch(), lai atbildi apstrādātu asinhroni. Atzvanīšanas funkcijā, kas nosūtīta uz then(), tiek izsaukta metode res.json(), lai parsētu atbildes pamattekstu kā JSON. Šī metode arī atgriež solījumu, kas atrisina parsētos JSON datus.
Vēl viena then() metode ir savienota ar ķēdi, lai apstrādātu parsētos JSON datus. Atzvanīšanas funkcijā parsētie JSON dati d tiek reģistrēti konsolē, izmantojot console.log()

2 . Tiek izmantota ienešana, lai publicētu JSON datus

Šajā piemērā mēs esam augšupielādējuši JSON datus, izmantojot JavaScript API. Varat iestatīt pieprasījuma pamattekstu JSON datu stingrākai versijai un iestatīt atbilstošās galvenes, lai norādītu, ka sūtāt JSON.

Ziņu pieprasījumus var veikt, izmantojot ienesi, norādot tālāk norādītās opcijas.

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

Pēc izlikšanas pieprasījuma sintakses pārbaudes skatiet tālāk redzamo piemēru, kurā parādīta izlikšanas pieprasījuma izmantošana ieneses metodē.

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 =>{ // Pārbaudiet, vai pieprasījums bija veiksmīgs if (!response.ok) { throw new Error('Tīkla atbilde nebija ok');  } // Parsēt atbildi kā JSON atgriešanās atbildi.json();  }) .then(data => { // Apstrādājiet JSON datu console.log(data); }) .catch(error => { // Apstrādājiet visas kļūdas, kas radušās fetch console.error('Ielneses kļūda: ', kļūda });>>       Paskaidrojums:     
    Mēs definējam jūsu JSON datus.  
  Mēs iestatījām izgūšanas pieprasījuma opcijas, tostarp metodi, kas iestatīta uz “POST”, satura tipa galvenes iestatījumu “application/json” un pamattekstu, kas iestatīts uz jūsu datu JSON stringificēto versiju.  
  Mēs veicam ielādes pieprasījumu ar piedāvātajām opcijām, izmantojot funkciju fetch().  
  Pārējā koda daļa paliek tāda pati kā iepriekš, apstrādājot atbildi un visas kļūdas, kas rodas ieneses laikā.  
 
     3.     Atcelšanas pieprasījuma pārtraukšana  
  Jūs varat izmantot     AbortController     un     AbortSignal interfeiss     lai pārtrauktu ielādes pieprasījumu JavaScript.  
Javascript { controller.abort(); // Pārtraukt nolasīšanas pieprasījumu console.log('Ieneses pieprasījuma noildze'); }, 5000); // Apstrādājiet izgūšanas pieprasījumu fetchPromise .then(response => { // Pārbaudiet, vai pieprasījums bija veiksmīgs if (!response.ok) { throw new Error('Tīkla atbilde nebija ok'); } // Parsējiet atbilde kā JSON atgriež response.json( }) .then(data => { // Apstrādājiet JSON datu konsoli.log(data); }) .catch(error => { // Apstrādājiet visas kļūdas, kas radušās fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Notīrīt taimautu });>>       Paskaidrojums:     
    Mēs izveidojam jaunu AbortController instanci un iegūstam tās signālu.  
  Mēs veicam ielādes pieprasījumu, izmantojot fetch() ar piedāvātajām opcijām.  
  Mēs iestatījām 5 sekunžu taimautu, izmantojot setTimeout(), lai pārtrauktu ielādes pieprasījumu, ja tas aizņem pārāk ilgu laiku.  
  Taimauta atzvanīšanas laikā mēs izsaucam controller.abort(), lai pārtrauktu izgūšanas pieprasījumu.  
  Mēs apstrādājam ieneses pieprasījumu kā parasti, tostarp analizējam atbildes un apstrādājam visas kļūdas.  
  Visbeidzot, blokā final() mēs notīrām taimautu, izmantojot clearTimeout(), lai novērstu taimauta aktivizēšanos, ja izgūšanas pieprasījums tiek pabeigts pirms taimauta termiņa beigām.  
 
  Pieprasījuma nosūtīšana, ieskaitot akreditācijas datus  
  Lai nosūtītu pieprasījumu, ieskaitot akreditācijas datus, piemēram,      cepumi      , izgūšanas pieprasījumā varat iestatīt iekļaujamo akreditācijas datu rekvizītu.  
  fetch('https://example.com', { credentials: 'include', }); 
    Ja vēlaties nosūtīt akreditācijas datus tikai tad, ja pieprasījuma URL ir tajā pašā izsaukšanas skripta izcelsmē, pievienojiet akreditācijas datus: “same-origin”.  
    JavaScript fetch() metodes izmantošanas gadījumi  
  Šeit ir daži no iegūšanas metodes izmantošanas gadījumiem. Šīs ir izplatītas problēmas, ar kurām saskaras iesācēju izstrādātāji, strādājot ar ielādi.  
   1.   Kā izmantot JavaScript Fetch API datu iegūšanai   
  JavaScript Get pieprasījums tiek izmantots, lai izgūtu datus no servera. Lai izmantotu Fetch API JavaScript, lai iegūtu datus no servera, varat veikt GET pieprasījumu vajadzīgajam URL un apstrādāt atbildi.  
   2.   Iegūt un publicēt metodi, izmantojot Fetch API   
  Fetch() metodi var izmantot jebkura veida pieprasījumiem, piemēram,     POSTĪT     ,     GŪT     ,     PUT,     un     DZĒST     ,     GET metode izmanto ieneses API     
   3.   Atšķirība starp Fetch un Axios http pieprasījumu veikšanai   
  Axios ir atsevišķa trešās puses pakotne, kuru var viegli instalēt, un Fetch ir iebūvēts lielākajā daļā mūsdienu pārlūkprogrammu; nav nepieciešama instalēšana kā tāda.  
      Atbalstītās pārlūkprogrammas:     
   JavaScript Fetch ir     ECMAScript6 (ES6)     funkcija un tiek atbalstīta gandrīz visās mūsdienu pārlūkprogrammās, piemēram:  
     Google Chrome   
   Mala       
   Firefox   
   Opera   
   Safari