Jako vývojář, který je z velké části samouk, jsem prošel celým světem bezplatných/placených internetových výukových programů. Něco, co vidím znovu a znovu se objevovat v tutoriálech provádějících požadavky HTTP, je použití knihovny JavaScriptu s názvem Axios. Chtěl jsem pochopit, proč tak široká škála učitelů tvorby webových stránek využívá tuto zdánlivě nenápadnou knihovnu. Rozhodl jsem se tedy, že se do toho ponořím a poskytnu velmi jednoduché a přímočaré vysvětlení toho, co Axios nabízí a proč (pravděpodobně) stojí za to ho používat.
Co dělá
V kostce řečeno, Axios je knihovna pro Javascript používaná k provádění požadavků HTTP z node.js nebo XMLHttpRequests z prohlížeče, která také podporuje API ES6 Promise. Skvělé, takže z toho vyplývá, že dělá něco, co už umíme a co bylo nedávno výrazně vylepšeno… Tak proč se tím zabývat?
Co chce vylepšit: .fetch()
Fetch používá při práci s daty JSON dvoufázový proces; po provedení počátečního požadavku je pak třeba zavolat metodu .json() na odpověď, abyste získali skutečný datový objekt. Pokud bych měl požadavek na fetch, abych získal zpět objekt příslušných řidičů pro svou aplikaci pro sourcing aut, mohl bych mít něco jako následující:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
To by vrátilo čekající slib a objekt odpovědi, který by mě informoval, že můj požadavek byl úspěšný, ale kde jsou moje data! Nesmíme zapomenout předat naši odpověď také metodě .json().
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Teď už to není takový problém, jako u mnoha jiných věcí jde opravdu o zapamatování syntaxe. Ale jako vývojáři jsme zároveň nejlínější a nejefektivnější tvorové na planetě – takže jakákoli zkratka nebo úspora času stojí za zvážení, zadejte Axios.
Lepší ošetření chyb
Pro kýžený výsledek, pokud jde o správné protokolování chyb v odpovědi pomocí .fetch(), musíme na naší straně vynaložit trochu práce navíc (opět by se dalo tvrdit, že jde jen o zapamatování syntaxe). MDN vysvětluje:
Příkaz
fetch()odmítne sTypeError, když dojde k chybě sítě nebo je na straně serveru špatně nakonfigurován CORS, ačkoli to obvykle znamená problémy s oprávněním nebo podobně – například 404 nepředstavuje chybu sítě.
Předpokládejme, že s naší proměnnou baseUrl není něco v pořádku. Očekávaný výstup pro následující blok kódu by byl chyba, ale místo toho je v pořádku. Proč tomu tak je?“
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Ukázalo se, že fetch() odmítá sliby pouze v relativně vzácných chybových situacích v síti, jako je selhání vyhledávání DNS. Naštěstí fetch() poskytuje jednoduchý příznak ok, který indikuje, zda je stavový kód odpovědi v rozsahu úspěšných nebo ne. Obecně to dopadne tak, že nakonec napíšete univerzální funkci pro ošetření chyb, která se použije na všechna vaše volání fetch().
Instalace Axiosu
Získávání nových knihoven je dnes snadné jako facka (Mmm.. rebarbora), já dávám přednost npm. V kořenovém adresáři svého projektu otevřete terminál, spusťte npm install axios a vše je připraveno. Nyní můžeme pro dosažení stejného požadavku na načtení, který jsme provedli dříve, zavolat axios.get() místo naší metody fetch takto:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Použitím metody axios odstraníme nutnost předávat výsledky požadavku HTTP metodě .json(). Axios jednoduše rovnou vrátí očekávaný datový objekt. Navíc jakýkoli druh chyby s požadavkem HTTP úspěšně provede blok .catch() ihned po spuštění. Zde je stručný přehled všech jeho základních funkcí, včetně několika, které jsem neuvedl přímo ze stránky GitHub:
- Provádění XMLHttpRequests z prohlížeče
- Provádění http požadavků z uzlu.js
- Podporuje Promise API
- Přijímá požadavky a odpovědi
- Transformuje data požadavků a odpovědí
- Zruší požadavky
- Automatické transformace pro data JSON
- Podpora na straně klienta pro ochranu proti XSRF
V souhrnu je Axios spíše zlepšením kvality života než čímkoli jiným. Ale provedení mnoha malých, postupných úprav kvality života v pracovních postupech může výrazně zlepšit kvalitu a rychlost vývoje
.