Praktični ES6 vodič za izvršavanje HTTP zahtjeva pomoću Fetch API-ja

Slika stvorila Jad Joubran

U ovom ćemo vam vodiču pokazati kako pomoću Fetch API-ja (ES6 +) da biste izvršili HTTP zahtjeve REST API-u s nekim praktičnim primjerima na koje ćete najvjerojatnije naići.

Želite li brzo vidjeti primjere HTTP-a? Idite na odjeljak 5. Prvi dio opisuje asinkroni dio JavaScript-a za rad s HTTP zahtjevima.

Napomena: Svi primjeri su napisani u ES6 sa strelicama.

Uobičajeni je obrazac u današnjim trenutačnim web / mobilnim aplikacijama zatražiti ili pokazati neku vrstu podataka s poslužitelja (kao što su korisnici, postovi, komentari, pretplate, plaćanja i tako dalje), a zatim njima manipulirati pomoću CRUD-a (kreiranje, čitanje, ažurirati ili izbrisati) operacije.

Da bismo dodatno manipulirali resursom, često koristimo ove JS metode (preporučene), kao što su .map (), .filter () i .reduce ().

Ako želite postati bolji web programer, pokrenuti vlastiti posao, podučavati druge ili poboljšati svoje razvojne vještine, tjedno ću objavljivati ​​savjete i trikove na najnovijim jezicima za web razvoj.

Evo čega ćemo se obratiti

  1. Suočavanje s JS-ovim asinkronim HTTP zahtjevima
  2. Što je AJAX?
  3. Zašto dohvatiti API?
  4. Brzi uvod u API za dohvaćanje
  5. Dohvati API - primjeri CRUD-a ← dobre stvari!

1. Suočavanje s asinhronim HTTP zahtjevima JS-a

Jedan od najizazovnijih dijelova razumijevanja kako JavaScript funkcionira (JS) je razumijevanje kako se postupa s asinkronim zahtjevima, što zahtijeva i razumijevanje funkcioniranja obećanja i povratnih poziva.

U većini programskih jezika umorni smo od mišljenja da se operacije događaju redoslijedom (redoslijedom). Prvi redak mora biti izveden prije nego što prijeđemo na sljedeći redak. To ima smisla, jer tako mi radimo i obavljamo svakodnevne zadatke.

Ali s JS-om imamo više operacija koje se izvode u pozadini / prednjem planu i ne možemo imati web-aplikaciju koja se zamrzava svaki put kad čeka korisnički događaj.

Opisivanje JavaScripta kao asinkronog možda je pogrešno. Preciznije je reći da je JavaScript sinkroniziran i s jednim navojem s različitim mehanizmima za povratni poziv. Čitaj više.

Ipak, ponekad se stvari moraju odvijati redom, inače će to izazvati kaos i neočekivane rezultate. Iz tog razloga možemo koristiti obećanja i povratne pozive za strukturiranje. Primjer može biti provjera korisničkih vjerodajnica prije nego što nastavite na sljedeću operaciju.

2. Što je AJAX

AJAX označava Asynchronous JavaScript i XML i omogućuje web stranice asinhrono ažuriranje razmjenom podataka s web poslužiteljem dok se aplikacija pokreće. Ukratko, to u biti znači da možete ažurirati dijelove web stranice bez ponovnog učitavanja cijele stranice (URL ostaje isti).

AJAX je pogrešno ime. AJAX aplikacije mogu koristiti XML za prijenos podataka, ali podjednako je čest za prijenos podataka kao obični tekst ili JSON tekst.
 - w3shools.com

AJAX skroz?

Vidio sam da se mnogi programeri često uzbuđuju jer imaju sve u jednoj stranici aplikacije (SPA), a to vodi do puno asinhronih bolova! Srećom, imamo biblioteke poput Angular, VueJS i React, što ovaj postupak čini puno lakšim i praktičnijim.

Općenito, važno je uspostaviti ravnotežu između onoga što bi trebalo ponovno učitati cijelu stranicu ili njezine dijelove.

U većini slučajeva ponovno učitavanje stranica funkcionira u smislu postojanja moćnih preglednika. Povratak dana, ponovno bi bilo potrebno ponovno učitavanje stranice (ovisno o lokaciji poslužitelja i mogućnosti preglednika). Ali današnji su preglednici vrlo brzi, pa odluka o tome treba li izvesti AJAX ili ponovno učitavanje stranica nije velika razlika.

Moje osobno iskustvo je da je mnogo lakše i brže stvoriti tražilicu jednostavnim gumbom za pretraživanje nego što to učiniti bez gumba. A u većini slučajeva kupca nije briga radi li se o SPA-u ili dodatnom obnovi stranice. Naravno, nemojte me krivo shvatiti, volim SPA-ove, ali moramo razmotriti nekoliko kompromisa, ako imamo posla s ograničenim proračunom i nedostatkom resursa, možda je brzo rješenje bolji pristup.

Na kraju, to stvarno ovisi o slučaju uporabe, ali osobno imam osjećaj da SPA-ovi zahtijevaju više vremena za razvoj i malo glavobolje nego jednostavno ponovno učitavanje stranica.

3. Zašto dohvatiti API?

To nam omogućuje obavljanje deklarativnih HTTP zahtjeva na poslužitelju. Za svaki zahtjev stvara Obećanje koje se mora riješiti u svrhu definiranja vrste sadržaja i pristupa podacima.

Prednost Fetch API-ja je ta što ga u potpunosti podržava JS ekosustav, a također je i dio dokumenata MDN Mozilla. I posljednje, ali ne najmanje bitno, djeluje izvan okvira na većini preglednika (osim IE). Dugoročno, pretpostavljam da će to postati standardni način pozivanja web API-ja.

Bilješka! Dobro poznajem druge HTTP pristupe, poput upotrebe Observable with RXJS, i kako se fokusira na upravljanje memorijom / curenje u smislu pretplate / otkazivanja pretplate i tako dalje. A možda će to postati novi standardni način obavljanja HTTP zahtjeva, tko zna?
U svakom slučaju, u ovom se članku fokusiram samo na Fetch API, ali mogu u budućnosti napisati članak o Observable i RXJS.

4. Brzi uvod u Fetch API

Metoda fetch () vraća obećanje koje rješava odgovor iz Zahtjeva da se prikaže status (uspješno ili ne). Ako ikada primite ovu poruku obećanu {} na zaslonu dnevnika konzole, nemojte paničariti - to u stvari znači da obećanje funkcionira, ali čeka da se riješi. Da bismo ga riješili, potreban nam je obradnik .then () (povratni poziv) za pristup sadržaju.

Dakle, ukratko, prvo definiramo put (Dohvati), drugo zahtijevamo podatke s poslužitelja (Zahtjev), treće definiramo vrstu sadržaja (Tijelo) i konačno, ali ne najmanje bitno, pristupamo podacima (Odgovor).

Ako se budete trudili razumjeti ovaj koncept, ne brinite. Dobićete bolji pregled kroz primjere prikazane u nastavku.

Put koji ćemo koristiti za svoje primjere
https://jsonplaceholder.typicode.com/users // vraća JSON

5. Dohvati API - primjeri HTTP-a

Ako želimo pristupiti podacima, potrebna su nam dva .then () alata (povratni poziv). Ali ako želimo manipulirati resursom, potreban nam je samo jedan .then () rukovatelj. Međutim, možemo upotrijebiti drugi kako bismo bili sigurni da je vrijednost poslana.

Osnovni predložak API dohvaćanja:

Bilješka! Gornji je primjer samo u ilustrativne svrhe. Kôd neće raditi ako ga izvršite.

Primjeri API preuzimanja

  1. Prikazivanje korisnika
  2. Prikaz popisa korisnika
  3. Izrada novog korisnika
  4. Brisanje korisnika
  5. Ažuriranje korisnika
Bilješka! Resurs neće stvarno biti stvoren na poslužitelju, ali će vratiti lažni rezultat da oponaša pravi poslužitelj.

1. Prikazivanje korisnika

Kao što je ranije spomenuto, postupak prikazivanja jednog korisnika sastoji se od dva .then () alata (povratni poziv), prvog za definiranje objekta, a drugog za pristup podacima.

Primjetite samo čitanjem niza upita / korisnika / 2 u stanju smo razumjeti / predvidjeti što API radi. Za više informacija o pisanju visokokvalitetnog REST API-ja potražite savjet ovih smjernica koji je napisao Mahesh Haldar.

Primjer

2. Prikaz popisa korisnika

Primjer je gotovo identičan prethodnom primjeru, osim što je niz upita / korisnici, a ne / korisnici / 2.

Primjer

3. Stvaranje novog korisnika

Ovaj izgleda malo drugačije od prethodnog primjera. Ako niste upoznati s HTTP protokolom, jednostavno nam pruža nekoliko slatkih metoda poput POST, GET, DELETE, UPDATE, PATCH i PUT. Ove su metode glagoli koji jednostavno opisuju vrstu akcije koja se izvršava i uglavnom se koriste za manipuliranje resursom / podacima na poslužitelju.

U svakom slučaju, da bismo stvorili novog korisnika s API-om za dohvaćanje, trebat ćemo koristiti HTTP glagol POST. Ali prvo ga moramo negdje definirati. Srećom, postoji opcijski argument Init koji možemo prenijeti zajedno s URL-om za definiranje prilagođenih postavki kao što su vrsta metode, tijelo, vjerodajnice, zaglavlja i tako dalje.

Napomena: Parametri metode fetch () identični su parametrima konstruktora Request ().

Primjer

4. Brisanje korisnika

Da bismo izbrisali korisnika, prvo moramo ciljati korisnika s / users / 1, a zatim definiramo vrstu metode koja je DELETE.

Primjer

5. Ažuriranje korisnika

HTTP glagol PUT koristi se za manipuliranje ciljnim resursom, a ako želite izvršiti djelomične promjene, morat ćete koristiti PATCH. Za više informacija o tome što rade ovi HTTP glagoli, pogledajte ovo.

Primjer

Zaključak

Sada imate osnovno razumijevanje kako dohvatiti ili manipulirati resursom s poslužitelja pomoću JavaScript API-ja za dohvaćanje, kao i kako se nositi s obećanjima. Ovaj članak možete koristiti kao vodič za strukturiranje zahtjeva za API za CRUD operacije.

Osobno, osjećam da je Fetch API deklarativan i možete lako razumjeti što se događa bez ikakvog iskustva s tehničkim kodiranjem.

Svi primjeri prikazani su u zahtjevu osnovne baze gdje zahtjev vezujemo pomoću .thenback. Ovo je standardni pristup s kojim su poznati mnogi vragovi, no ako želite koristiti async / wait čekajte ovaj članak. Koncept je isti, osim što je asinh / čekanje lakše čitati i pisati.

Evo nekoliko članaka koje sam napisao o web-ekosustavu, zajedno s osobnim programskim savjetima i trikovima.

  • Usporedba između Angular i React
  • Kaotičan um dovodi do kaotičnog koda
  • Programeri koji stalno žele učiti nove stvari
  • Praktični vodič za ES6 module
  • Naučite ove osnovne web-koncepte
  • Povećajte svoje vještine ovim važnim JavaScript metodama
  • Program brže kreirajte prilagođene bash naredbe

Možete me naći na Mediumu gdje objavljujem na tjednoj osnovi. Ili me možete slijediti na Twitteru, gdje objavljujem relevantne savjete i trikove za web razvoj zajedno s osobnim pričama.

p.s. Ako ste uživali u ovom članku i želite više ovakvih, molimo pljeskajte i podijelite s prijateljima koji su vam možda potrebni, to je dobra karma.