Praktický sprievodca ES6 o tom, ako vykonávať požiadavky HTTP pomocou rozhrania Fetch API

Obrázok vytvoril Jad Joubran

V tejto príručke vám ukážem, ako používať rozhranie Fetch API (ES6 +) na vykonávanie požiadaviek HTTP na rozhranie REST API, s niekoľkými praktickými príkladmi, s ktorými sa pravdepodobne stretnete.

Chcete rýchlo vidieť príklady HTTP? Prejdite do časti 5. Prvá časť popisuje asynchrónnu časť jazyka JavaScript pri práci s požiadavkami HTTP.

Poznámka: Všetky príklady sú napísané v ES6 s funkciami šípok.

Bežným vzorom v dnešných súčasných webových / mobilných aplikáciách je vyžiadať alebo ukázať nejaké údaje zo servera (napríklad používateľov, príspevky, komentáre, predplatné, platby atď.) A potom s nimi manipulovať pomocou CRUD (vytvárať, čítať, aktualizovať alebo vymazať).

Na ďalšiu manipuláciu so zdrojom často používame tieto metódy JS (odporúčané), ako napríklad .map (), .filter () a .reduce ().

Ak sa chcete stať lepším vývojárom webu, začať podnikať, učiť ostatných alebo zlepšovať svoje vývojové zručnosti, uverejňujem týždenné tipy a triky v najnovších jazykoch pre vývoj webových aplikácií.

Tu je to, čo oslovíme

  1. Zaobchádzanie s asynchrónnymi HTTP požiadavkami JS
  2. Čo je AJAX?
  3. Prečo načítať API?
  4. Rýchle predstavenie rozhrania Fetch API
  5. Načítať API - príklady CRUD ← dobré veci!

1. Zaobchádzanie s asynchrónnymi HTTP požiadavkami JS

Jednou z najnáročnejších častí pri pochopení toho, ako funguje JavaScript (JS), je porozumenie, ako sa vysporiadať s asynchrónnymi požiadavkami, čo vyžaduje a pochopenie toho, ako fungujú sľuby a spätné volania.

Vo väčšine programovacích jazykov sme zapojení, aby sme si mysleli, že operácie prebiehajú v poriadku (postupne). Prvý riadok musí byť vykonaný predtým, ako sa presunieme na ďalší riadok. Dáva to zmysel, pretože takto pracujeme a plníme každodenné úlohy.

Ale s JS máme viac operácií, ktoré bežia na pozadí / v popredí, a nemôžeme mať webovú aplikáciu, ktorá zamrzne zakaždým, keď čaká na užívateľskú udalosť.

Popis jazyka JavaScript ako asynchrónneho je možno zavádzajúci. Je presnejšie povedané, že JavaScript je synchrónny a s jedným vláknom s rôznymi mechanizmami spätného volania. Čítaj viac.

Niekedy sa však musia veci stať v poriadku, inak to spôsobí chaos a neočakávané výsledky. Z tohto dôvodu môžeme na jeho štruktúrovanie použiť sľuby a spätné volania. Príkladom by mohlo byť overenie poverení používateľa pred pokračovaním v ďalšej operácii.

2. Čo je AJAX

AJAX je skratka pre Asynchrónny JavaScript a XML a umožňuje asynchrónnu aktualizáciu webových stránok výmenou údajov s webovým serverom, keď je aplikácia spustená. Stručne povedané, v podstate to znamená, že môžete aktualizovať časti webovej stránky bez opätovného načítania celej stránky (adresa URL zostane rovnaká).

AJAX je zavádzajúce meno. Aplikácie AJAX môžu používať XML na prenos údajov, ale rovnako je bežné prenášať údaje ako obyčajný text alebo text JSON.
 - w3shools.com

AJAX celú cestu?

Videl som, že mnohí vývojári majú tendenciu byť skutočne nadšení, že majú všetko v jednej stránke aplikácie (SPA), a to vedie k mnohým asynchrónnym bolestiam! Našťastie máme knižnice ako Angular, VueJS a React, vďaka ktorým je tento proces oveľa jednoduchší a praktickejší.

Celkovo je dôležité mať rovnováhu medzi tým, čo by malo znova načítať celú stránku alebo jej časti.

Vo väčšine prípadov funguje načítanie stránky dobre, pokiaľ ide o výkonnosť prehliadačov. V týchto dňoch by načítanie stránky trvalo niekoľko sekúnd (v závislosti od umiestnenia servera a možností prehľadávača). Dnešné prehliadače sú však veľmi rýchle, takže rozhodnutie, či vykonať AJAX alebo obnovenie stránky, nie je veľkým rozdielom.

Moja osobná skúsenosť je, že je oveľa jednoduchšie a rýchlejšie vytvoriť vyhľadávací nástroj s jednoduchým vyhľadávacím tlačidlom, ako urobiť bez tlačidla. A vo väčšine prípadov sa nestará o to, či ide o SPA alebo o ďalšie načítanie stránky. Samozrejme, nerobte mi zle, milujem kúpele, ale musíme zvážiť niekoľko kompromisov, ak sa zaoberáme obmedzeným rozpočtom a nedostatkom zdrojov, potom rýchle riešenie je lepším prístupom.

Nakoniec to záleží na prípadu použitia, ale osobne mám pocit, že SPA vyžadujú viac času na vývoj a trochu bolesti hlavy ako jednoduché opätovné načítanie stránky.

3. Prečo načítať API?

To nám umožňuje vykonať deklaratívne požiadavky HTTP na server. Pre každú žiadosť vytvorí prísľub, ktorý sa musí vyriešiť, aby sa definoval typ obsahu a prístup k údajom.

Výhodou rozhrania Fetch API je, že je plne podporovaný ekosystémom JS a je tiež súčasťou dokumentov MDN Mozilla. A v neposlednom rade funguje vo väčšine prehliadačov (okrem IE). Z dlhodobého hľadiska sa domnievam, že sa stane štandardným spôsobom volania webových rozhraní API.

Poznámka! Som si dobre vedomý iných prístupov HTTP, ako je napríklad používanie služby Observable with RXJS a ako sa zameriava na správu pamäte / únik z hľadiska prihlásenia na odber / odhlásenia atď. A možno sa to stane novým štandardným spôsobom vykonávania požiadaviek HTTP, kto vie?
V tomto článku sa zameriavam iba na rozhranie Fetch API, ale v budúcnosti budem môcť napísať článok o pozorovateľných a RXJS.

4. Rýchly úvod do načítania API

Metóda fetch () vráti prísľub, ktorý vyrieši odpoveď z požiadavky na zobrazenie stavu (úspešný alebo nie). Ak sa vám táto správa sľubuje {} na obrazovke protokolu konzoly, nepropadajte panike - v podstate to znamená, že program Promise funguje, ale čaká na vyriešenie. Aby sme to vyriešili, potrebujeme pre prístup k obsahu obslužný program .then () (spätné volanie).

Stručne povedané, najskôr definujeme cestu (Fetch), po druhé údaje o požiadavkách zo servera (Request), po tretie definujeme typ obsahu (Body) av neposlednom rade pristupujeme k údajom (Response).

Ak sa snažíte pochopiť tento koncept, nebojte sa. Lepší prehľad získate pomocou príkladov uvedených nižšie.

Cesta, ktorú použijeme pre naše príklady
https://jsonplaceholder.typicode.com/users // vracia JSON

5. Načítať API - príklady HTTP

Ak chceme získať prístup k údajom, potrebujeme dve obsluhy .then () (callback). Ale ak chceme manipulovať so zdrojom, potrebujeme iba jeden obslužný program .then (). Pomocou druhej však môžeme skontrolovať, či bola hodnota odoslaná.

Šablóna Basic Fetch API:

Poznámka! Vyššie uvedený príklad slúži iba na ilustráciu. Kód nebude fungovať, ak ho spustíte.

Načítať príklady rozhrania API

  1. Zobrazuje sa používateľ
  2. Zobrazuje sa zoznam používateľov
  3. Vytvorenie nového používateľa
  4. Odstránenie používateľa
  5. Aktualizácia používateľa
Poznámka! Prostriedok nebude na serveri skutočne vytvorený, ale vráti falošný výsledok napodobňujúci skutočný server.

1. Zobrazuje používateľa

Ako už bolo spomenuté, proces zobrazovania jedného používateľa pozostáva z dvoch obslužných programov (spätné volanie). (Prvé) na definovanie objektu a druhého na prístup k údajom.

Všimnite si, že prečítaním reťazca dotazov / users / 2 dokážeme porozumieť / predpovedať, čo API robí. Viac informácií o tom, ako písať vysokokvalitné REST API, nájdete v tipoch na pokyny, ktoré napísal Mahesh Haldar.

príklad

2. Zobrazuje sa zoznam používateľov

Príklad je takmer totožný s predchádzajúcim príkladom s tou výnimkou, že reťazec dotazu je / users, a nie / users / 2.

príklad

3. Vytvorenie nového používateľa

Tento vyzerá trochu inak ako v predchádzajúcom príklade. Ak nie ste oboznámení s protokolom HTTP, jednoducho nám poskytuje niekoľko sladkých metód, ako napríklad POST, GET, DELETE, UPDATE, PATCH a PUT. Tieto metódy sú slovesá, ktoré jednoducho popisujú typ akcie, ktorá sa má vykonať, a väčšinou sa používajú na manipuláciu so zdrojmi / údajmi na serveri.

Na vytvorenie nového používateľa pomocou rozhrania Fetch API je však potrebné použiť HTTP sloveso POST. Najprv to však musíme niekde definovať. Našťastie existuje voliteľný argument Init, ktorý môžeme odovzdať spolu s URL na definovanie vlastných nastavení, ako je typ metódy, telo, poverenia, hlavičky a tak ďalej.

Poznámka: Parametre metódy fetch () sú totožné s parametrami konštruktora Request ().

príklad

4. Vymazanie používateľa

Aby sme vymazali používateľa, musíme najprv zacieľovať na používateľa pomocou / users / 1 a potom definovať typ metódy, ktorý je DELETE.

príklad

5. Aktualizácia používateľa

HTTP sloveso PUT sa používa na manipuláciu s cieľovým zdrojom a ak chcete vykonať čiastočné zmeny, musíte použiť PATCH. Ak chcete získať ďalšie informácie o tom, čo tieto slovesá HTTP robia, prečítajte si toto.

príklad

záver

Teraz máte základné vedomosti o tom, ako načítať alebo manipulovať so zdrojom zo servera pomocou rozhrania API na načítanie JavaScriptu, a tiež o tom, ako riešiť sľuby. Tento článok môžete použiť ako návod na štruktúrovanie vašich požiadaviek API na operácie CRUD.

Osobne mám pocit, že rozhranie Fetch API je deklaratívne a môžete ľahko pochopiť, čo sa deje bez akýchkoľvek technických skúseností s kódovaním.

Všetky príklady sú uvedené v žiadosti o zasľúbenú bázu, kde ju pripájame pomocou spätného volania. Jedná sa o štandardný prístup, s ktorým sú mnohí devs oboznámení, ak však chcete použiť async / čakať, prečítajte si tento článok. Koncepcia je rovnaká, okrem async / čakajú sa ľahšie na čítanie a zápis.

Tu je niekoľko článkov, ktoré som napísal o webovom ekosystéme, spolu s tipmi a trikmi osobného programovania.

  • Porovnanie medzi Angular a React
  • Chaotická myseľ vedie k chaotickému kódu
  • Vývojári, ktorí sa neustále chcú učiť nové veci
  • Praktický sprievodca modulmi ES6
  • Naučte sa tieto základné webové koncepty
  • Zvýšte svoje zručnosti pomocou týchto dôležitých metód JavaScript
  • Programujte rýchlejšie vytvorením vlastných bash príkazov

Nájdete ma na médiu, kde týždenne publikujem. Alebo ma môžete sledovať na Twitteri, kde uverejňujem relevantné tipy a triky na vývoj webových aplikácií spolu s osobnými príbehmi.

PS: Ak sa vám tento článok páčil a chcete viac podobných, tlieskajte ❤ a zdieľajte ich s priateľmi, ktorí to môžu potrebovať, je to dobrá karma.