Som en till stor del självlärd utvecklare har jag testat den breda världen av kostnadsfria och betalda handledningar på internet. Något jag ser dyka upp gång på gång i handledningar som utför HTTP-förfrågningar är användningen av ett JavaScript-bibliotek som heter Axios. Jag ville förstå varför ett så stort antal webbutbildare använder sig av detta till synes oansenliga bibliotek. Så jag bestämde mig för att gräva ner mig för att leverera en mycket enkel och okomplicerad förklaring av vad Axios erbjuder och varför det (förmodligen) är värt att använda.
Vad det gör
I ett nötskal är Axios ett Javascript-bibliotek som används för att göra HTTP-begäranden från node.js eller XMLHttpRequests från webbläsaren och som också har stöd för ES6 Promise API. Bra, så från det kan vi utläsa att det gör något som vi redan kan göra och som nyligen har gjorts betydligt bättre… Så varför bry sig?
Vad det syftar till att förbättra: .fetch()
Fetch använder sig av en tvåstegsprocess när man hanterar JSON-data; efter att ha gjort en första förfrågan måste du sedan anropa .json()-metoden på svaret för att ta emot det faktiska dataobjektet. Om jag skulle ha en hämtningsförfrågan för att få tillbaka ett objekt med relevanta förare för min bilpoolsapp kan jag få något som liknar följande:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Detta skulle returnera ett väntande löfte och ett svarsobjekt som låter mig veta att min förfrågan var framgångsrik, men var är mina data?! Vi måste komma ihåg att skicka vårt svar till .json()-metoden också.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Nu är det ingen stor grej, som många andra saker handlar det egentligen om att memorera syntaxen. Men som utvecklare är vi samtidigt de lataste och mest effektiva varelserna på planeten – så varje form av förkortning eller tidsbesparing är värd att överväga, skriver Axios.
Bättre felhantering
Det finns en del extra arbete som vi måste lägga ner i vår ände (återigen kan det hävdas att det här bara handlar om syntaxminnesinlärning) för att få det önskade resultatet när det gäller att logga svarsfel på rätt sätt med .fetch(). MDN förklarar:
Ett
fetch()-löfte kommer att avvisa med enTypeErrornär ett nätverksfel uppstår eller CORS är felkonfigurerat på serversidan, även om detta vanligtvis innebär behörighetsproblem eller liknande – en 404 utgör till exempel inte ett nätverksfel.
Låt oss anta att det är något fel med vår baseUrl-variabel. Förväntningen på utdata för följande kodblock skulle vara fel, men istället är det ok. Varför är detta?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Det visar sig att fetch() endast avvisar löften i relativt sällsynta nätverksfelssituationer som t.ex. ett misslyckande med DNS-sökning. Lyckligtvis tillhandahåller fetch() en enkel ok-flagga som anger om statuskoden för ett svar ligger inom området ”successful” eller inte. Generellt sett slutar det med att du skriver en felhanteringsfunktion som passar alla och som används på alla dina fetch()-anrop.
Installation av Axios
Att hämta nya bibliotek är lätt som en plätt nuförtiden (Mmm… rabarber), jag föredrar npm. I roten av din projektmapp öppnar du terminalen, kör npm install axios och du är klar. För att uppnå samma hämtningsförfrågan som vi utförde tidigare kan vi nu åberopa axios.get() i stället för vår hämtningsmetod så här:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Genom att använda axios tar vi bort behovet av att skicka resultaten av HTTP-förfrågan till .json()-metoden. Axios returnerar helt enkelt det dataobjekt du förväntar dig direkt. Dessutom kommer alla typer av fel med en HTTP-förfrågan att framgångsrikt exekvera blocket .catch() direkt från början. Här är en kort genomgång av alla dess primära funktioner, inklusive några som jag inte täckte direkt från GitHub-sidan:
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Stöder Promise API
- Intercept request and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Stöd på klientsidan för att skydda sig mot XSRF
In summa summarum, Axios är en förbättring av livskvalitén mer än något annat. Men om man gör många små, inkrementella justeringar av livskvaliteten i sitt arbetsflöde kan man drastiskt förbättra utvecklingskvaliteten och hastigheten.