HAE API JAVASCRIPTISSÄ ESIMERKEIN - TECHCODEVIEW.COM

JavaScript fetch()> menetelmä, jota käytetään resurssien hakemiseen palvelimelta. Se palauttaa Promisen, joka ratkaisee Response-objektin, joka kapseloi palvelimen vastauksen pyyntöön. fetch()> helpottaa sekä GET-pyyntöjen tekemistä, joita tyypillisesti käytetään tietojen hakemiseen, että LÄHETTÄÄ pyyntöjä, joita käytetään tietojen lähettämiseen palvelimille.

Lisäksi, fetch()> integroi saumattomasti edistyneet HTTP toimintoja, kuten Cross-Origin Resource Sharing (CORS) ja muut laajennukset, jotka rikastuttavat verkkokehityskokemusta parannetulla suojauksella ja yhteentoimivuudella.

Huomautus: Fetch API:n mukana tulee fetch()-menetelmä, jota käytetään tietojen hakemiseen eri lähteistä.

Syntaksi:

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

Parametrit:

URL-osoite: URL-osoite, johon pyyntö lähetetään.
Vaihtoehdot: Se on joukko ominaisuuksia. Se on valinnainen parametri. Saatavilla olevat vaihtoehdot ovat:
- Menetelmä: Määrittää pyynnön HTTP-menetelmän. (voi olla GET, POST, PUT tai DELETE)
- Otsikot
- Runko: Tiedot lähetetään pyynnön mukana.
- Tila: Määrittää pyyntötilan (esim. cors, nocors, samaa alkuperää jne)
- Valtuustiedot : Määrittää, lähetetäänkö käyttäjän tunnistetiedot (evästeet, todennusotsikot jne.) pyynnön kanssa

JavaScript fetch() -menetelmäesimerkkejä

Katsotaanpa joitain esimerkkejä hakumenetelmästä. Nämä esimerkit antavat sinulle täydellisen käsityksen JavaScriptin hakumenetelmästä.

1 . Hae pyyntö Fetchillä

Tämä esimerkki näyttää, kuinka saada pyyntö hakumenetelmässä.

Huomautus: Ilman vaihtoehtoja Fetch toimii aina hakupyyntönä.

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

Lähtö:

Selitys:

JS-fetch()-funktiota käytetään GET-pyynnön lähettämiseen URL-osoitteeseen https://jsonplaceholder.typicode.com/todos/1. Tämä funktio palauttaa lupauksen, joka ratkaisee vastausobjektin, joka edustaa vastausta pyyntöön.
Menetelmä then() on ketjutettu fetch()-kutsuun käsitelläkseen vastausta asynkronisesti. Kanavalle then() välitetyn takaisinkutsun sisällä res.json()-menetelmää kutsutaan jäsentämään vastauksen runko JSON-muodossa. Tämä menetelmä palauttaa myös lupauksen, joka ratkaisee jäsennetyt JSON-tiedot.
Toinen then()-menetelmä on ketjutettu käsittelemään jäsennettyjä JSON-tietoja. Sen takaisinsoittotoiminnon sisällä jäsennetyt JSON-tiedot d kirjataan konsoliin käyttämällä console.log()

2 . Hae JSON-tietojen lähettämiseen

Tässä esimerkissä olemme ladanneet JSON-tiedot JavaScriptin fetch()-sovellusliittymän avulla. Voit määrittää pyynnön runkotekstiksi JSON-joustetun version tiedoistasi ja määrittää sopivat otsikot osoittamaan, että lähetät JSON-koodin.

Postituspyyntöjä voidaan tehdä hakutoiminnolla antamalla alla annetut vaihtoehdot:

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

Kun olet tarkistanut lähetyspyynnön syntaksin, katso alla olevaa esimerkkiä, joka osoittaa lähetyspyynnön käytön hakumenetelmässä.

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 =>{ // Tarkista onnistuiko pyyntö if (!response.ok) { throw new Error('Verkon vastaus ei ollut ok');  } // Jäsennä vastaus muodossa JSON return response.json();  }) .then(data => { // Käsittele JSON-dataa console.log(data); }) .catch(error => { // Käsittele haun aikana ilmenneet virheet console.error('Fetch error: ', virhe });>>       Selitys:     
    Määrittelemme JSON-tietosi.  
  Määritimme noutopyynnölle vaihtoehdot, mukaan lukien menetelmän POST, Content-Type-otsikon asetukseksi sovellus/json ja rungon datasi JSON-jonotettuun versioon.  
  Teemme hakupyynnön annetuilla vaihtoehdoilla käyttämällä fetch()-funktiota.  
  Muu osa koodista pysyy samana kuin ennenkin, ja se käsittelee vastauksen ja mahdolliset virheet noudon aikana.  
 
     3.     Hakupyynnön keskeyttäminen  
  Voit käyttää     AbortController     ja     AbortSignal-liitäntä     peruuttaaksesi JavaScriptin hakupyynnön.  
Javascript { controller.abort(); // Keskeytä hakupyyntö console.log('Hakupyyntö aikakatkaistiin'); }, 5000); // Käsittele hakupyyntö fetchPromise .then(response => { // Tarkista onnistuiko pyyntö if (!response.ok) { throw new Error('Verkkovastaus ei ollut ok'); } // Jäsennä vastaus JSON-muodossa return response.json(); fetch console.error('Hae virhe:', virhe }) .finally(() => { clearTimeout(timeoutId); // Tyhjennä aikakatkaisu });>>       Selitys:     
    Luomme uuden AbortController-esiintymän ja hankimme sen signaalin.  
  Teemme noutopyynnön käyttämällä fetch()-toimintoa tarjotuilla vaihtoehdoilla.  
  Asetamme 5 sekunnin aikakatkaisun käyttämällä setTimeout()-komentoa noutopyynnön keskeyttämiseksi, jos se kestää liian kauan.  
  Aikakatkaisun takaisinkutsun sisällä kutsumme controller.abort()-komentoa peruuttaaksemme hakupyynnön.  
  Käsittelemme noutopyynnön tavalliseen tapaan, mukaan lukien vastauksen jäsentämisen ja mahdollisten virheiden käsittelyn.  
  Lopuksi final()-lohkossa tyhjennämme aikakatkaisun käyttämällä clearTimeout()-komentoa estääksemme aikakatkaisun laukeamisen, jos hakupyyntö valmistuu ennen aikakatkaisun umpeutumista.  
 
  Pyynnön lähettäminen Sisältää valtuustiedot  
  Voit lähettää pyynnön, joka sisältää valtuustiedot, kuten      keksit      , noutopyynnössä voit määrittää tunnistetiedot sisällytettäväksi.  
  fetch('https://example.com', { credentials: 'include', }); 
    Jos haluat lähettää tunnistetiedot vain, jos pyynnön URL-osoite on samassa alkuperässä kuin kutsuvan skriptin, lisää tunnistetiedot: 'sama-alkuperä'.  
    JavaScript fetch() -menetelmän käyttötapaukset  
  Tässä on joitain hakumenetelmän käyttötapauksia. Nämä ovat yleisiä ongelmia, joita aloittelevat kehittäjät kohtaavat, kun he työskentelevät haulla.  
   1.   JavaScript Fetch API:n käyttäminen tietojen hankkimiseen   
  JavaScript Get -pyyntöä käytetään tietojen hakemiseen palvelimelta. Jos haluat käyttää Fetch API:ta JavaScriptissä tietojen saamiseksi palvelimelta, voit tehdä GET-pyynnön haluttuun URL-osoitteeseen ja käsitellä vastausta.  
   2.   Hanki ja lähetä -menetelmä Fetch API:lla   
  Fetch()-menetelmää voidaan käyttää minkä tahansa tyyppisten pyyntöjen kanssa, kuten     LÄHETTÄÄ     ,     SAADA     ,     LAITTAA,     ja     POISTAA     ,     GET-menetelmä käyttää fetch API:ta     
   3.   Ero Fetch:n ja Axiosin välillä http-pyyntöjen tekemisessä   
  Axios on itsenäinen kolmannen osapuolen paketti, joka voidaan asentaa helposti ja Fetch on sisäänrakennettu useimpiin nykyaikaisiin selaimiin. asennusta ei vaadita sellaisenaan.  
      Tuetut selaimet:     
   JavaScript Fetch on     ECMAScript6 (ES6)     ominaisuus ja sitä tuetaan melkein kaikissa nykyaikaisissa selaimissa, kuten:  
     Google Chrome   
   Reuna       
   Firefox   
   Ooppera   
   Safari