Som en stort set autodidakt udvikler har jeg prøvet den store verden af gratis/betalte tutorials på internettet af på kryds og tværs. Noget jeg ser dukke op igen og igen i tutorials, der udfører HTTP-forespørgsler, er brugen af et JavaScript-bibliotek kaldet Axios. Jeg ønskede at forstå, hvorfor en så bred vifte af webudviklingsundervisere gjorde brug af dette tilsyneladende ubemærkede bibliotek. Så jeg besluttede mig for at grave mig ned for at levere en meget enkel og ligefrem forklaring på, hvad Axios tilbyder, og hvorfor det (sandsynligvis) er værd at bruge.
Hvad det gør
I en nøddeskal er Axios et Javascript-bibliotek, der bruges til at foretage HTTP-forespørgsler fra node.js eller XMLHttpRequests fra browseren, som også understøtter ES6 Promise API’et. Fint, så af det kan vi udlede, at det gør noget, som vi allerede kan gøre, og som for nylig er blevet gjort betydeligt bedre… Så hvorfor gider man?
Hvad det har til formål at forbedre: .fetch()
Fetch bruger en totrinsproces, når der håndteres JSON-data; efter at have foretaget en indledende anmodning skal du derefter kalde .json()-metoden på svaret for at modtage det faktiske dataobjekt. Hvis jeg skulle have en hentningsanmodning for at få et objekt med relevante chauffører tilbage til min app til indkøb af samkørsel, kunne jeg få noget i retning af følgende:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Dette ville returnere et afventende løfte og et svarobjekt, der fortæller mig, at min anmodning var vellykket, men hvor er mine data?! Vi skal huske at videregive vores svar til .json()-metoden også.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Nu er det ikke noget stort problem, som mange andre ting handler det i virkeligheden om at huske syntaksen udenad. Men som udviklere er vi på samme tid de mest dovne og mest effektive skabninger på planeten – så enhver form for stenografi eller tidsbesparelse er værd at overveje, indtaster Axios.
Bedre fejlhåndtering
Der er noget ekstra arbejde, vi skal lægge i vores ende (igen kan det hævdes, at det blot er et spørgsmål om syntaksmemorisering) for at opnå det ønskede resultat, når det kommer til korrekt logning af svarfejl med .fetch(). MDN forklarer:
Et
fetch()-forsvar vil afvise med enTypeError, når der opstår en netværksfejl eller CORS er fejlkonfigureret på serversiden, selv om dette normalt betyder problemer med tilladelser eller lignende – en 404 udgør f.eks. ikke en netværksfejl.
Lad os antage, at der er noget galt med vores baseUrl-variabel. Forventningen til output for den følgende kodeblok ville være fejl, men i stedet er det ok. Hvorfor er dette?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Det viser sig, at fetch() kun afviser løfter i relativt sjældne netværksfejlsituationer som f.eks. et fejlslagent DNS-opslag. Heldigvis indeholder fetch() et simpelt ok-flag, der angiver, om statuskoden for et svar er i området “successful” eller ej. Generelt er det, der sker, at du ender med at skrive en fejlhåndteringsfunktion, der passer til alle dine fetch()-opkald.
Installation af Axios
Installation af nye biblioteker er let som en leg i disse dage (Mmm… rabarber), jeg foretrækker npm. I roden af din projektmappe åbner du terminal, kører npm install axios, og du er klar. For nu at opnå den samme hentningsanmodning, som vi udførte tidligere, kan vi påkalde axios.get() i stedet for vores hentningsmetode på følgende måde:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Ved at bruge axios fjerner vi behovet for at videregive resultaterne af HTTP-forespørgslen til .json()-metoden. Axios returnerer simpelthen det dataobjekt, du forventer, med det samme. Derudover vil enhver form for fejl med en HTTP-anmodning med succes udføre .catch()-blokken lige ud af boksen. Her er en kort gennemgang af alle dens primære funktioner, herunder et par stykker, som jeg ikke har dækket direkte fra GitHub-siden:
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Understøtter Promise API
- Intercept request and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Automatic transforms for JSON data
- Client side support for protecting against XSRF
Sammenfattende er Axios en forbedring af livskvaliteten mere end noget andet. Men ved at foretage mange små, inkrementelle justeringer af livskvaliteten i ens arbejdsgang kan man drastisk forbedre udviklingskvaliteten og hastigheden.