JavaScripti tõmbamise API õpetus koos JS Fetchi postituse ja päise näidetega

Kui kirjutate veebirakendust, peate tõenäoliselt töötama väliste andmetega. See võib olla teie enda andmebaas, kolmanda osapoole API ja nii edasi.

Kui AJAX esmakordselt 1999. aastal ilmus, näitas see meile paremat viisi veebirakenduste loomiseks. AJAX oli veebiarenduse verstapost ja on paljude kaasaegsete tehnoloogiate, nagu React, peamine kontseptsioon.

Enne AJAX-i pidite kogu veebisaidi ka väiksemate värskenduste jaoks uuesti renderdama. Kuid AJAX andis meile võimaluse taustaprogrammist sisu hankida ja valitud kasutajaliidese elemente värskendada. See aitas arendajatel parandada kasutajakogemust ja ehitada suuremaid, keerukamaid veebiplatvorme.

REST-i API-de krahhikursus

Nüüd oleme RESTful API-de ajastul. Lihtsamalt öeldes võimaldab REST API teil andmeid salvestada ja tõmmata. See võib olla teie andmebaas või kolmanda osapoole server nagu Twitter API.

REST API-sid on paar erinevat tüüpi. Vaatame neid, mida enamikul juhtudel kasutate.

  • GET  - hankige andmeid API-st. Näiteks hankige oma kasutajanime põhjal twitteri kasutaja.
  • POST  - Andmete edastamine API-le. Näiteks looge uus kasutajakirje koos nime, vanuse ja e-posti aadressiga.
  • PUT  - olemasoleva kirje värskendamine uute andmetega. Näiteks värskendage kasutaja e-posti aadressi.
  • KUSTUTA  - eemaldage kirje. Näiteks kustutage kasutaja andmebaasist.

Igas REST API-s on kolm elementi. Taotlus, vastus ja päised.

Taotlus  - need on teie API-le saadetud andmed, näiteks tellimuse üksikasjade toomiseks tellimuse ID.

Vastus  - kõik andmed, mille serverilt pärast edukat / ebaõnnestunud päringut tagasi saate.

Päised  - API-le edastatud täiendavad metaandmed, mis aitavad serveril mõista, millist tüüpi taotlust ta käsitleb, näiteks „sisutüüp”.

REST API kasutamise tegelik eelis on see, et saate mitme rakenduse jaoks luua ühe API kihi.

Kui teil on andmebaas, mida soovite hallata veebi-, mobiil- ja töölauarakenduse abil, on teil vaja vaid ühte REST API-kihti.

Nüüd, kui teate, kuidas REST API-d töötavad, vaatame, kuidas me saame neid tarbida.

XMLHttpRequest

Enne kui JSON maailmas üle võttis, oli andmevahetuse esmane formaat XML. XMLHttpRequest () on JavaScripti funktsioon, mis võimaldas andmeid hankida API-dest, mis tagastasid XML-i andmed.

XMLHttpRequest andis meile võimaluse tõmmata XML-andmeid taustaprogrammist kogu lehte uuesti laadimata.

See funktsioon on kasvanud algsetest päevadest, mil ta oli ainult XML. Nüüd toetab see muid andmevorminguid, nagu JSON ja tavaline tekst.

Kirjutame minu profiili toomiseks lihtsa XMLHttpRequesti kutse GitHubi API-le.

// 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.

Ülaltoodud kood saadab GET-taotluse aadressile //api.github.com/users/manishmshiva minu GitHubi teabe hankimiseks JSON-is. Kui vastus õnnestus, prindib see konsooli järgmise JSON-i:

Kui taotlus ebaõnnestus, prindib see selle tõrketeate konsooli:

Too API

Fetch API on ressursside asünkroonseks tarbimiseks lihtsam ja hõlpsasti kasutatav versioon XMLHttpRequest. Fetch võimaldab teil töötada REST API-dega lisavõimalustega, nagu andmete vahemällu salvestamine, voogesitusvastuste lugemine ja palju muud.

Suurim erinevus on see, et Fetch töötab lubadustega, mitte tagasihelistamistega. JavaScripti arendajad on pärast lubaduste kehtestamist tagasihelistamisest eemaldunud.

Kompleksse rakenduse jaoks võite kergesti harjuda tagasihelistuste kirjutamisega, mis viib tagasihelistamiseni.

Lubadustega on asünkroonseid taotlusi lihtne kirjutada ja käsitleda. Kui lubadused on teile uued, saate siin teada, kuidas need toimivad.

Varem kirjutatud funktsioon näeks välja selline, kui kasutate XMLHttpRequesti asemel 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

Funktsiooni Fetch esimene parameeter peaks olema alati URL. Seejärel võtab Fetch teise JSON-i objekti valikutega nagu meetod, päised, päringu keha ja nii edasi.

XMLHttpRequesti ja Fetchi vastusobjekti vahel on oluline erinevus.

XMLHttpRequest tagastab andmed vastusena, samal ajal kui Fetchi vastusobjekt sisaldab teavet vastusobjekti enda kohta. See hõlmab päiseid, olekukoodi jne. Vajalike andmete saamiseks vastuse objektilt helistame funktsioonile „res.json ()”.

Teine oluline erinevus on see, et Fetch API ei viska viga, kui taotlus tagastab olekukoodi 400 või 500. See märgitakse endiselt edukaks vastuseks ja edastatakse funktsioonile „siis”.

Fetch viskab vea ainult siis, kui taotlus ise katkestatakse. 400 ja 500 vastuse töötlemiseks võite kirjutada kohandatud loogika, kasutades 'response.status'. Atribuut 'status' annab teile tagastatud vastuse olekukoodi.

Suurepärane. Nüüd, kui olete aru saanud, kuidas rakendus Fetch API töötab, vaatame veel paar näidet, näiteks andmete edastamine ja päistega töötamine.

Töö päistega

Päiseid saate edastada atribuudi „päised” abil. Koodi paremaks struktureerimiseks võite kasutada ka päiste konstruktorit. Kuid JSON-objekti edastamine atribuudile „päised” peaks enamikul juhtudel toimima.

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

Andmete edastamine POST-päringule

POST-päringu jaoks saate atribuudi „body” abil sisestada JSON-stringi sisendina. Pange tähele, et päringu keha peaks olema JSON-string, päised aga JSON-objekt.

// 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 API on endiselt aktiivses arenduses. Paremaid funktsioone võime oodata lähitulevikus.

Kuid enamik brausereid toetab rakenduses Fetchi kasutamist. Allolev diagramm peaks aitama teil välja selgitada, millised brauserid seda veebi- ja mobiilirakendustes toetavad.

Loodan, et see artikkel aitas teil mõista, kuidas Fetch API-ga töötada. Proovige oma järgmise veebirakenduse jaoks kindlasti rakendust Fetch.

Kirjutan regulaarselt masinõppest, küberturvalisusest ja DevOpsist. Minu iganädalase uudiskirja saamiseks saate registreeruda siin.