Mivel nagyrészt autodidakta fejlesztő vagyok, az ingyenes/fizetős internetes oktatóprogramok széles világát próbára tettem. Valami, amit újra és újra látok felbukkanni a HTTP-kéréseket végrehajtó oktatóprogramokban, az az Axios nevű JavaScript könyvtár használata. Meg akartam érteni, hogy a webfejlesztést oktatók ilyen széles köre miért használja ezt a látszólag feltűnésmentes könyvtárat. Ezért úgy döntöttem, hogy beleásom magam, hogy egy nagyon egyszerű, közérthető magyarázatot adjak arról, hogy mit kínál az Axios, és miért érdemes (valószínűleg) használni.
Mire képes
Dióhéjban az Axios egy Javascript könyvtár, amelyet a node.js vagy az XMLHttpRequests böngészőből történő HTTP-kérések végrehajtására használnak, és amely támogatja az ES6 Promise API-t is. Remek, tehát ebből arra következtetünk, hogy olyasmit csinál, amit mi már tudunk, és amit nemrég jelentősen javítottak… Szóval miért zavarja?
Mit akar javítani: .fetch()
A fetch egy kétlépcsős folyamatot használ, amikor JSON adatokkal foglalkozik; a kezdeti kérés után meg kell hívni a .json() metódust a válaszon, hogy megkapjuk a tényleges adatobjektumot. Ha lenne egy fetch-kérésem, hogy visszakapjak egy objektumot a releváns sofőrökről a telekocsi-közvetítő alkalmazásom számára, akkor valami ilyesmit kaphatnék:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Ez egy függőben lévő ígéretet és egy válaszobjektumot adna vissza, ami tudatja velem, hogy a kérésem sikeres volt, de hol vannak az adataim?! Nem szabad elfelejtenünk, hogy a .json() metódusnak is át kell adnunk a válaszunkat.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Nem nagy ügy, mint sok minden, ez is csak a szintaxis memorizálásán múlik. De fejlesztőként egyszerre vagyunk a leglustább és leghatékonyabb lények a bolygón – így mindenfajta gyorsírás vagy időmegtakarítás megfontolásra érdemes, adja meg az Axios.
Jobb hibakezelés
Ezért némi extra munkát kell végeznünk a mi részünkről (megint csak a szintaxis memorizálásáról lehet beszélni) a kívánt eredmény érdekében, amikor a .fetch() válaszhibák megfelelő naplózásáról van szó. Az MDN elmagyarázza:
A
fetch()ígéretTypeError-vel utasítja vissza, ha hálózati hiba lép fel, vagy a CORS szerveroldalon rosszul van beállítva, bár ez általában jogosultsági problémákat vagy hasonlót jelent – egy 404 például nem minősül hálózati hibának.
Tegyük fel, hogy valami baj van a baseUrl változóval. A következő kódblokk kimenete várhatóan hiba lenne, ehelyett azonban rendben van. Miért van ez?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Kiderült, hogy a fetch() csak viszonylag ritka hálózati hibahelyzetekben, például DNS-keresési hiba esetén utasítja el az ígéreteket. Szerencsére a fetch() biztosít egy egyszerű ok flag-et, amely jelzi, hogy a válasz státuszkódja a sikeres tartományban van-e vagy sem. Általában az történik, hogy a végén egy egyméretű hibakezelő függvényt írsz, amit az összes fetch() hívásodra használhatsz.
Az Axios telepítése
Az új könyvtárak beszerzése manapság pofonegyszerű (Mmm… rebarbara), én az npm-et részesítem előnyben. A projekt mappád gyökerében nyisd meg a terminált, futtasd a npm install axios és már kész is vagy. Most, hogy elérjük ugyanazt a fetch kérést, amit korábban végrehajtottunk, meghívhatjuk a axios.get()-t a fetch metódusunk helyett, így:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Az axios használatával megszüntetjük annak szükségességét, hogy a HTTP-kérés eredményét átadjuk a .json() metódusnak. Az axios egyszerűen azonnal visszaadja a várt adatobjektumot. Ráadásul a HTTP-kérelemmel kapcsolatos bármilyen hiba esetén azonnal sikeresen végrehajtja a .catch() blokkot. Itt van egy rövid összefoglaló az összes elsődleges funkciójáról, beleértve néhányat, amire nem tértem ki közvetlenül a GitHub oldalról:
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Támogatja a Promise API-t
- Kérés és válasz elfogása
- Kérés és válasz adatok átalakítása
- Kérések törlése
- A JSON adatok automatikus átalakítása
- Kliens oldali támogatás az XSRF elleni védelemhez
Összefoglalva, az Axios inkább az életminőség javítása, mint bármi más. De sok apró, fokozatos életminőségi módosítással a munkafolyamatban drasztikusan javíthatjuk a fejlesztés minőségét és sebességét.