Vodič za JavaScript Fetch API s primjerima JS Fetch Post i Header

Ako pišete web aplikaciju, velika je vjerojatnost da ćete morati raditi s vanjskim podacima. To može biti vaša vlastita baza podataka, API-ji treće strane itd.

Kada se AJAX prvi put pojavio 1999. godine, pokazao nam je bolji način za izradu web aplikacija. AJAX je bio prekretnica u web razvoju i temeljni je koncept mnogih modernih tehnologija poput React-a.

Prije AJAX-a morali ste ponovno prikazati cijelu web stranicu čak i za manja ažuriranja. Ali AJAX nam je dao način da dohvatimo sadržaj sa pozadine i ažuriramo odabrane elemente korisničkog sučelja. To je pomoglo programerima da poboljšaju korisničko iskustvo i izgrade veće, komplicirane web platforme.

Crash tečaj o REST API-ima

Sada smo u dobi RESTful API-ja. Jednostavno rečeno, REST API omogućuje vam guranje i povlačenje podataka iz pohrane podataka. Ovo može biti vaša baza podataka ili poslužitelj treće strane poput Twitter API-ja.

Postoji nekoliko različitih vrsta REST API-ja. Pogledajmo one koje ćete koristiti u većini slučajeva.

  • GET  - Dohvatite podatke iz API-ja. Na primjer, potražite korisnika twittera na temelju njegovog korisničkog imena.
  • POST  - Pošaljite podatke API-ju. Na primjer, stvorite novi korisnički zapis s imenom, dobi i adresom e-pošte.
  • PUT  - Ažurirajte postojeći zapis novim podacima. Na primjer, ažurirajte e-adresu korisnika.
  • BRISATI  - Uklonite zapis. Na primjer, izbrišite korisnika iz baze podataka.

U svakom REST API-ju postoje tri elementa. Zahtjev, odgovor i zaglavlja.

Zahtjev  - ovo su podaci koje šaljete API-u, poput ID-a narudžbe za dohvaćanje detalja narudžbe.

Odgovor  - Svi podaci koje vratite s poslužitelja nakon uspješnog / neuspjelog zahtjeva.

Zaglavlja  - Dodatni metapodaci proslijeđeni API-ju kako bi poslužitelj razumio s kojom se vrstom zahtjeva radi, na primjer “vrsta sadržaja”.

Stvarna prednost korištenja REST API-a je ta što možete izgraditi jedan API sloj za više aplikacija s kojima može raditi.

Ako imate bazu podataka kojom želite upravljati pomoću web, mobilnih i stolnih aplikacija, potreban vam je samo jedan REST API sloj.

Sad kad znate kako REST API-ji rade, pogledajmo kako ih možemo potrošiti.

XMLHttpRequest

Prije nego što je JSON zavladao svijetom, primarni format razmjene podataka bio je XML. XMLHttpRequest () je JavaScript funkcija koja je omogućila dohvaćanje podataka iz API-ja koji su vratili XML podatke.

XMLHttpRequest dao nam je mogućnost dohvaćanja XML podataka iz pozadine bez ponovnog učitavanja cijele stranice.

Ova je funkcija narasla od početnih dana kada je bila samo XML. Sada podržava druge formate podataka poput JSON-a i otvorenog teksta.

Napišimo jednostavan XMLHttpRequest poziv GitHub API-ju da dohvati moj profil.

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

Gornji kôd poslat će GET zahtjev //api.github.com/users/manishmshiva za dohvaćanje mojih podataka o GitHubu u JSON-u. Ako je odgovor bio uspješan, ispisat će sljedeći JSON na konzolu:

Ako zahtjev nije uspio, ispisat će ovu poruku o pogrešci na konzolu:

Dohvaćanje API-ja

API Fetch jednostavnija je i jednostavna verzija XMLHttpRequest za asinhronu potrošnju resursa. Dohvaćanje omogućuje vam rad s REST API-ima s dodatnim opcijama kao što su predmemoriranje podataka, čitanje odgovora na streaming i još mnogo toga.

Glavna razlika je u tome što Fetch radi s obećanjima, a ne s povratnim pozivima. Programeri JavaScript-a odmaknuli su se od povratnih poziva nakon uvođenja obećanja.

Za složenu aplikaciju lako ćete steći naviku pisanja povratnih poziva koji vode u pakao povratnog poziva.

Pomoću obećanja lako je pisati i obraditi asinkrone zahtjeve. Ako ste novi u obećanjima, ovdje možete naučiti kako funkcioniraju.

Evo kako bi izgledala funkcija koju smo ranije napisali da ste umjesto XMLHttpRequest koristili 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

Prvi parametar funkcije Dohvaćanje uvijek bi trebao biti URL. Dohvat zatim uzima drugi JSON objekt s opcijama poput metode, zaglavlja, tijela zahtjeva i tako dalje.

Važna je razlika između objekta odgovora u XMLHttpRequest i Fetch.

XMLHttpRequest vraća podatke kao odgovor, dok objekt odgovora iz Dohvaćanja sadrži informacije o samom objektu odgovora. To uključuje zaglavlja, statusni kod itd. Pozivamo funkciju "res.json ()" da bismo dobili podatke koji su nam potrebni iz objekta odgovora.

Druga važna razlika je u tome što Fetch API neće pojaviti pogrešku ako zahtjev vrati statusni kôd 400 ili 500. I dalje će biti označen kao uspješan odgovor i proslijeđen funkciji 'tada'.

Dohvaćanje donosi pogrešku samo ako je sam zahtjev prekinut. Da biste obradili 400 i 500 odgovora, možete napisati prilagođenu logiku pomoću "response.status". Svojstvo 'status' dat će vam statusni kôd vraćenog odgovora.

Sjajno. Sad kad razumijete kako funkcionira Fetch API, pogledajmo još nekoliko primjera poput prosljeđivanja podataka i rada sa zaglavljima.

Rad sa zaglavljima

Možete proslijediti zaglavlja koristeći svojstvo "headers". Konstruktor zaglavlja možete koristiti i za bolju strukturu koda. No prosljeđivanje JSON objekta svojstvu "headers" trebalo bi raditi u većini slučajeva.

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

Prosljeđivanje podataka na POST zahtjev

Za POST zahtjev možete koristiti svojstvo "body" da biste proslijedili JSON niz kao ulaz. Imajte na umu da bi tijelo zahtjeva trebalo biti JSON niz, dok bi zaglavlja trebala biti 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));

The Fetch API is still in active development. We can expect better features in the near future.

However, most browsers support the use of Fetch in your applications. The chart below should help you figure out which browsers support it on the web and mobile apps.

I hope this article helped you understand how to work with the Fetch API. Be sure to try out Fetch for your next web application.

I regularly write about Machine Learning, Cyber Security, and DevOps. You can signup for my weekly newsletter here.