JavaScript Fetch -sovelluksen opetusohjelma, jossa on JS Fetch Post- ja Header-esimerkkejä

Jos kirjoitat verkkosovellusta, sinun on todennäköisesti työskenneltävä ulkoisten tietojen kanssa. Tämä voi olla oma tietokanta, kolmannen osapuolen sovellusliittymät ja niin edelleen.

Kun AJAX ilmestyi ensimmäisen kerran vuonna 1999, se osoitti meille paremman tavan rakentaa verkkosovelluksia. AJAX oli virstanpylväs verkkokehityksessä, ja se on keskeinen käsite monien nykyaikaisten tekniikoiden, kuten Reactin, takana.

Ennen AJAX: ää joudut hahmottamaan kokonaisen verkkosivun uudelleen myös pieniä päivityksiä varten. Mutta AJAX antoi meille tavan hakea sisältöä taustasta ja päivittää valitut käyttöliittymäelementit. Tämä auttoi kehittäjiä parantamaan käyttökokemusta ja rakentamaan suurempia, monimutkaisia ​​verkkoalustoja.

Kaatumiskurssi REST-sovellusliittymissä

Olemme nyt RESTful-sovellusliittymien aikakaudella. Yksinkertaisesti sanottuna REST-sovellusliittymän avulla voit työntää ja vetää tietoja datakaupasta. Tämä voi olla joko tietokanta tai kolmannen osapuolen palvelin, kuten Twitter-sovellusliittymä.

REST-sovellusliittymiä on muutamia erityyppisiä. Katsotaanpa niitä, joita käytät useimmissa tapauksissa.

  • GET  - Hae tietoja sovellusliittymästä. Hanki esimerkiksi twitter-käyttäjä käyttäjänimen perusteella.
  • POST  - Push data for API. Luo esimerkiksi uusi käyttäjätietue, jossa on nimi, ikä ja sähköpostiosoite.
  • PUT  - Päivitä olemassa oleva tietue uusilla tiedoilla. Päivitä esimerkiksi käyttäjän sähköpostiosoite.
  • POISTA  - Poista tietue. Poista esimerkiksi käyttäjä tietokannasta.

Jokaisessa REST-sovellusliittymässä on kolme elementtiä. Pyyntö, vastaus ja otsikot.

Pyyntö  - nämä ovat tietoja, jotka lähetät API: lle, kuten tilaustunnus tilaustietojen noutamiseksi.

Vastaus  - kaikki tiedot, jotka saat palvelimelta takaisin onnistuneen / epäonnistuneen pyynnön jälkeen.

Otsikot  - API: lle välitetyt lisätiedot, jotta palvelin ymmärtäisi, minkä tyyppisiä pyyntöjä se käsittelee, esimerkiksi "sisältötyyppi".

REST-sovellusliittymän käytön todellinen etu on, että voit rakentaa yhden API-kerroksen useita sovelluksia varten.

Jos sinulla on tietokanta, jota haluat hallita verkko-, mobiili- ja työpöytäsovelluksella, tarvitset vain yhden REST API -kerroksen.

Nyt kun tiedät, kuinka REST-sovellusliittymät toimivat, katsotaanpa, miten voimme käyttää niitä.

XMLHttpRequest

Ennen kuin JSON otti haltuunsa maailman, tietojenvaihdon ensisijainen muoto oli XML. XMLHttpRequest () on JavaScript-toiminto, joka mahdollisti tietojen hakemisen XML-tietoja palauttaneista sovellusliittymistä.

XMLHttpRequest antoi meille mahdollisuuden hakea XML-tietoja taustasta lataamatta koko sivua uudelleen.

Tämä toiminto on kasvanut alkuperäisistä päivistä, jolloin se oli vain XML. Nyt se tukee muita datamuotoja, kuten JSON ja selkokielinen.

Kirjoitetaan yksinkertainen XMLHttpRequest-kutsu GitHub-sovellusliittymään profiilini hakemiseksi.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

Yllä oleva koodi lähettää GET-pyynnön osoitteeseen //api.github.com/users/manishmshiva hakemaan GitHub-tietoni JSONista. Jos vastaus onnistui, se tulostaa seuraavan JSON: n konsoliin:

Jos pyyntö epäonnistui, se tulostaa tämän virhesanoman konsoliin:

Hae sovellusliittymä

Fetch-sovellusliittymä on yksinkertaisempi ja helppokäyttöisempi XMLHttpRequest-versio, joka kuluttaa resursseja asynkronisesti. Hae avulla voit työskennellä REST-sovellusliittymien kanssa lisäasetuksilla, kuten välimuistitiedoilla, suoratoistovastausten lukemisella ja muilla.

Suurin ero on, että Fetch toimii lupausten kanssa, ei takaisinsoittojen kanssa. JavaScript-kehittäjät ovat siirtyneet takaisinsoittojen jälkeen lupausten käyttöönoton jälkeen.

Monimutkaisessa sovelluksessa saatat helposti tulla tapaksi kirjoittaa soittopyyntöjä, jotka johtavat takaisinsoittohelvettiin.

Lupauksilla on helppo kirjoittaa ja käsitellä asynkronisia pyyntöjä. Jos olet uusi lupauksissa, voit oppia, miten ne toimivat täällä.

Näin kirjoitimme aiemmin kirjoittamamme funktion, jos käytät XMLHttpRequestin sijaan fetch ():

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

Hae-funktion ensimmäisen parametrin tulisi aina olla URL-osoite. Sitten Fetch vie toisen JSON-objektin vaihtoehdoilla, kuten menetelmä, otsikot, pyynnön runko ja niin edelleen.

XMLHttpRequest- ja Fetch-vastausobjektien välillä on tärkeä ero.

XMLHttpRequest palauttaa tiedot vasteena, kun taas Fetchin vastausobjekti sisältää tietoja itse vastausobjektista. Tämä sisältää otsikot, tilakoodin jne. Kutsumme "res.json ()" -toimintoa saadaksemme tarvitsemamme tiedot vastausobjektista.

Toinen tärkeä ero on, että Fetch-sovellusliittymä ei heitä virhettä, jos pyyntö palauttaa tilakoodin 400 tai 500. Se merkitään edelleen onnistuneeksi vastaukseksi ja välitetään sitten-toiminnolle.

Fetch heittää virheen vain, jos pyyntö itse keskeytetään. Voit käsitellä 400 ja 500 vastausta kirjoittamalla mukautetun logiikan käyttämällä 'response.status'. Status-ominaisuus antaa sinulle palautetun vastauksen tilakoodin.

Loistava. Nyt kun ymmärrät Fetch-sovellusliittymän toiminnan, katsotaanpa vielä muutama esimerkki, kuten tietojen välittäminen ja työskentely otsikoiden kanssa.

Työskentely otsikkojen kanssa

Voit siirtää otsikot käyttämällä otsikot-ominaisuutta. Voit myös rakentaa koodisi paremmin otsikkorakentajan avulla. Mutta JSON-objektin välittäminen otsikot-ominaisuudelle pitäisi toimia useimmissa tapauksissa.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Tietojen siirtäminen POST-pyyntöön

POST-pyynnössä voit käyttää ”body” -ominaisuutta välittääksesi JSON-merkkijonon syötteeksi. Huomaa, että pyynnön rungon tulisi olla JSON-merkkijono, kun taas otsikkojen tulisi olla JSON-objekti.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Fetch-sovellusliittymää kehitetään edelleen aktiivisesti. Voimme odottaa parempia ominaisuuksia lähitulevaisuudessa.

Useimmat selaimet tukevat kuitenkin Fetchin käyttöä sovelluksissasi. Alla olevan kaavion pitäisi auttaa sinua selvittämään, mitkä selaimet tukevat sitä verkko- ja mobiilisovelluksissa.

Toivon, että tämä artikkeli auttoi sinua ymmärtämään Fetch-sovellusliittymän käyttöä. Kokeile Fetchia seuraavaa verkkosovellusta varten.

Kirjoitan säännöllisesti koneoppimisesta, kyberturvallisuudesta ja DevOpsista. Voit ilmoittautua viikkotiedotteeni täältä.