Praktikus ES6 útmutató a HTTP kérések végrehajtásáról a Fetch API használatával

Ebben az útmutatóban megmutatom, hogyan használhatja a Fetch API-t (ES6 +) HTTP kérések végrehajtására egy REST API-hoz, néhány gyakorlati példával, amelyekkel valószínűleg találkozik.

Szeretné gyorsan megtekinteni a HTTP-példákat? Ugrás az 5. szakaszra. Az első rész a JavaScript aszinkron részét írja le, amikor HTTP-kérelmekkel dolgozik.

Megjegyzés : Az összes példa az ES6 nyílfüggvényekkel van megírva.

A mai webes / mobilalkalmazásokban szokásos szokás valamilyen adat kérése vagy megjelenítése a szervertől (például felhasználók, bejegyzések, megjegyzések, előfizetések, fizetések stb.), Majd a CRUD használatával (létrehozás, olvasás, frissítés vagy törlés) műveletek.

Az erőforrások további manipulálásához gyakran ezeket a JS módszereket (ajánlott) használjuk, mint például .map(), .filter()és .reduce().

Ha jobb webfejlesztőként szeretnél lenni, saját vállalkozást alapítani, másokat tanítani vagy fejlesztési készségeidet fejleszteni, heti tippeket és trükköket teszek közzé a legújabb webfejlesztési nyelveken.

Itt fogunk foglalkozni

  1. JS aszinkron HTTP kéréseinek kezelése
  2. Mi az AJAX?
  3. Miért kell letölteni az API-t?
  4. Gyors bevezető a Fetch API-hoz
  5. Fetch API - CRUD példák ← a jó dolgok!

1. A JS aszinkron HTTP kéréseinek kezelése

Az egyik legnagyobb kihívást jelentő rész a JavaScript (JS) működésének megértésével az aszinkron kérések kezelésének megértése, amely megköveteli és megérti az ígéretek és visszahívások működését.

A legtöbb programozási nyelvben arra vagyunk gondolva, hogy a műveletek sorrendben (egymás után) történnek. Az első sort végre kell hajtani, mielőtt továbbléphetnénk a következő sorra. Ennek van értelme, mert mi, emberek, így működtetjük és teljesítjük a napi feladatokat.

De a JS-szel több műveletünk van, amelyek a háttérben / előtérben futnak, és nem rendelkezhetünk olyan webalkalmazással, amely minden alkalommal lefagy, amikor egy felhasználói eseményre vár.

A JavaScript aszinkronként való leírása talán félrevezető. Pontosabb azt mondani, hogy a JavaScript szinkron és egyszálú a különféle visszahívási mechanizmusokkal. Olvass tovább.

Ennek ellenére néha a dolgoknak rendben kell történniük, különben káoszt és váratlan eredményeket okoz. Ezért ígéreteket és visszahívásokat használhatunk fel a strukturáláshoz. Példa lehet a felhasználói adatok hitelesítése a következő művelet folytatása előtt.

2. Mi az AJAX

Az AJAX az Asynchronous JavaScript és XML rövidítéseket jelenti, és lehetővé teszi a weboldalak aszinkron frissítését az adatoknak a webkiszolgálóval történő cseréjével, miközben az alkalmazás fut. Röviden, lényegében azt jelenti, hogy a weboldal egyes részeit az egész oldal újratöltése nélkül frissítheti (az URL változatlan marad).

Az AJAX félrevezető név. Lehet, hogy az AJAX alkalmazások XML-t használnak az adatok továbbítására, de ugyanolyan általános az adatok egyszerű vagy JSON szövegként történő továbbítása is.

- w3shools.com

AJAX végig?

Láttam, hogy sok fejlesztő általában nagyon izgatott, hogy mindent egyoldalas alkalmazás (SPA) tartalmaz, és ez rengeteg aszinkron fájdalomhoz vezet! De szerencsére vannak olyan könyvtárak, mint az Angular, a VueJS és a React, amelyek sokkal könnyebbé és praktikusabbá teszik ezt a folyamatot.

Összességében fontos, hogy egyensúly álljon fenn az egész oldal vagy az oldalrészek újratöltése között.

És a legtöbb esetben az oldal újratöltése jól működik abban a tekintetben, hogy a böngészők milyen erősek lettek. A napokban az oldal újratöltése másodperceket vesz igénybe (a szerver helyétől és a böngésző képességeitől függően). De a mai böngészők rendkívül gyorsak, így az AJAX vagy az oldal újratöltésének eldöntése nem nagy különbség.

Személyes tapasztalatom az, hogy sokkal egyszerűbb és gyorsabb egy keresőmotort létrehozni egy egyszerű keresőgombbal, mint egy gomb nélkül. És a legtöbb esetben az ügyfelet nem érdekli, hogy SPA vagy extra oldal-újratöltés. Természetesen ne értsen félre, szeretem a fürdőhelyeket, de figyelembe kell vennünk néhány kompromisszumot, ha korlátozott költségvetéssel és erőforráshiánnyal küzdünk, akkor talán egy gyors megoldás jobb megközelítés.

Végül valóban a használati esettől függ, de személy szerint úgy érzem, hogy a SPA-k több fejlesztési időt és egy kis fejfájást igényelnek, mint egy egyszerű oldal újratöltése.

3. Miért kell letölteni az API-t?

Ez lehetővé teszi számunkra, hogy deklaratív HTTP kéréseket hajtsunk végre egy szerver felé. Minden kéréshez létrehoz egy, Promiseamelyet meg kell oldani a tartalom típusának meghatározása és az adatokhoz való hozzáférés érdekében.

A Fetch API előnye, hogy a JS ökoszisztéma teljes mértékben támogatja, és része az MDN Mozilla dokumentációinak is. Végül, de nem utolsósorban, a legtöbb böngészőben (az IE kivételével) a dobozon kívül működik. Hosszú távon azt hiszem, ez lesz a webes API-k szokásos módon történő hívásának módja.

Jegyzet! Tudom, hogy más HTTP megközelítések vannak, például az Observable használata az RXJS-sel, és hogyan összpontosít a memóriakezelésre / szivárgásra az előfizetés / leiratkozás stb. Szempontjából. És talán ez lesz az új szokásos módszer a HTTP kérések végrehajtására, ki tudja?

Egyébként ebben a cikkben csak a Fetch API-ra koncentrálok, de a jövőben írhatok egy cikket az Observable és az RXJS-ről.

4. Gyors bevezető a Fetch API-hoz

A fetch()metódus a-t ad vissza, Promiseamely feloldja a Response-tól Requestaz állapotot (sikeres vagy nem). Ha valaha is megkapja ezt az üzenetet promise {}a konzol napló képernyőjén, ne essen pánikba - ez alapvetően azt jelenti, hogy Promiseműködik, de megoldásra vár. Tehát annak megoldásához a .then()kezelőre (visszahívásra) van szükségünk a tartalom eléréséhez.

Röviden tehát először meghatározzuk az útvonalat ( Fetch ), másodszor adatot kérünk a szervertől ( Request ), harmadszor meghatározzuk a tartalom típusát ( Body ) és nem utolsó sorban hozzáférünk az adatokhoz ( Response ).

Ha ennek a koncepciónak a megértésével küzd, ne aggódjon. Jobb áttekintést kap az alábbi példákon keresztül.

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

5. Fetch API - HTTP példák

Ha hozzá akarunk férni az adatokhoz, két .then()kezelőre van szükségünk (visszahívás). De ha manipulálni akarjuk az erőforrást, akkor csak egy .then()kezelőre van szükségünk . A másodikkal azonban megbizonyosodhatunk arról, hogy az érték el lett-e küldve.

Basic Fetch API sablon:

Jegyzet! A fenti példa csak szemléltető célokat szolgál. A kód nem fog működni, ha végrehajtja.

API példák letöltése

  1. Felhasználó megjelenítése
  2. A felhasználók listájának megjelenítése
  3. Új felhasználó létrehozása
  4. Felhasználó törlése
  5. Felhasználó frissítése
Jegyzet! Az erőforrás nem igazán jön létre a szerveren, de hamis eredményt ad vissza, hogy utánozza a valódi szervert.

1. Felhasználó megjelenítése

Mint korábban említettük, az egyetlen felhasználó bemutatásának folyamata két .then()kezelőből (visszahívás) áll, az első az objektumot definiálja, a második pedig az adatokhoz való hozzáférést.

Csak a lekérdezés karaktersorozatának elolvasásával /users/2vesszük észre, hogy megértsük / megjósoljuk az API működését. Ha további információt szeretne kapni a kiváló minőségű REST API-ról, olvassa el ezeket az útmutatásokat, amelyeket Mahesh Haldar írt.

Példa

2. A felhasználók listájának megjelenítése

A példa szinte megegyezik az előző példával, azzal a különbséggel, hogy a lekérdezési karakterlánc nem /users, és nem /users/2.

Példa

3. Új felhasználó létrehozása

Ez kissé eltér az előző példától. Ha nem ismeri a HTTP protokoll, egyszerűen biztosít számunkra egy pár édes módszerek, például POST, GET, DELETE, UPDATE, PATCHés PUT. Ezek a módszerek olyan igék, amelyek egyszerűen leírják a végrehajtandó művelet típusát, és többnyire a kiszolgáló erőforrásának / adatainak manipulálására szolgálnak.

Mindenesetre egy új felhasználó létrehozásához a Fetch API-val a HTTP igét kell használnunk POST. De először meg kell határoznunk valahol. Szerencsére van egy opcionális argumentum Init, amelyet átadhatunk az URL-lel együtt az egyéni beállítások, például a módszer típusa, törzs, hitelesítő adatok, fejlécek stb. Meghatározásához.

Megjegyzés: A fetch()módszer paraméterei megegyeznek a Request()konstruktor paramétereivel .

Példa

4. Felhasználó törlése

A felhasználó törléséhez először meg kell céloznunk a felhasználót /users/1, majd meg kell határoznunk a módszer típusát DELETE.

Példa

5. Felhasználó frissítése

A HTTP ige PUTa cél erőforrás manipulálására szolgál, és ha részleges módosításokat szeretne végrehajtani, akkor ezt kell használnia PATCH. További információ arról, hogy ezek a HTTP igék mit csinálnak, nézze meg ezt.

Példa

Következtetés

Most már alapvető ismeretekkel rendelkezik az erőforrások lekéréséről vagy kezeléséről a szerverről a JavaScript Fetch API használatával, valamint az ígéretek kezeléséről. Ezt a cikket útmutatóként használhatja az API-kérelmek strukturálásához a CRUD műveletekhez.

Személy szerint úgy érzem, hogy a Fetch API deklaratív, és bármilyen technikai kódolási tapasztalat nélkül könnyedén megértheti, mi történik.

Minden példát az ígért bázis kérés mutat be, ahol .thenvisszahívás segítségével láncoljuk a kérést . Ez egy szokásos megközelítés, amelyet sok fejlesztő ismer, azonban, ha használni szeretné, async/awaitnézze meg ezt a cikket. A koncepció ugyanaz, kivéve async/await, hogy könnyebben olvasható és írható.

Íme néhány cikk, amelyet a web-ökoszisztémáról írtam, valamint személyes programozási tippek és trükkök.

  • Az Angular és a React összehasonlítása
  • A kaotikus elme kaotikus kódhoz vezet
  • Fejlesztők, akik folyamatosan szeretnének új dolgokat megtanulni
  • Gyakorlati útmutató az ES6 modulokhoz
  • Ismerje meg ezeket az alapvető webkoncepciókat
  • Növelje képességeit ezekkel a fontos JavaScript módszerekkel
  • Gyorsabb programozás egyedi bash parancsok létrehozásával

Megtalál a Mediumon, ahol heti rendszerességgel publikálok. Vagy követhet a Twitteren, ahol releváns webfejlesztési tippeket és trükköket teszek közzé személyes történetekkel együtt.

PS Ha tetszett ez a cikk, és szeretnél még ilyeneket, kérlek tapsolj ❤ és oszd meg barátaiddal, akiknek szükségük lehet rá, ez jó karma.