Als een grotendeels autodidactische ontwikkelaar heb ik de wijde wereld van gratis/betaalde internet tutorials aan een kritische blik onderworpen. Iets wat ik steeds weer zie opduiken in tutorials over HTTP-verzoeken is het gebruik van een JavaScript-bibliotheek genaamd Axios. Ik wilde begrijpen waarom zo’n breed scala van web development docenten gebruik maken van deze schijnbaar onopvallende bibliotheek. Dus besloot ik in te graven om een zeer eenvoudige, rechttoe rechtaan uitleg te leveren van wat Axios biedt en waarom het (waarschijnlijk) de moeite waard is om te gebruiken.
Wat het doet
In een notendop, Axios is een Javascript bibliotheek die wordt gebruikt om HTTP-verzoeken van node.js of XMLHttpRequests van de browser te maken die ook de ES6 Belofte API ondersteunt. Geweldig, dus daaruit maken we op dat het iets doet wat we al kunnen doen en dat onlangs aanzienlijk beter is gemaakt … Dus waarom de moeite doen?
Wat het beoogt te verbeteren: .fetch()
Fetch gebruikt een tweestapsproces bij het omgaan met JSON-gegevens; na het doen van een initieel verzoek moet je vervolgens de .json() methode op het antwoord aanroepen om het eigenlijke gegevensobject te ontvangen. Als ik een fetch verzoek zou hebben om een object van relevante chauffeurs terug te krijgen voor mijn carpool sourcing app, zou ik iets als het volgende kunnen hebben:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Dit zou een pending promise en response object teruggeven om me te laten weten dat mijn verzoek succesvol was, maar waar zijn mijn gegevens?! We moeten niet vergeten om ons antwoord ook door te geven aan de .json() methode.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Nu is dat niet zo’n groot probleem, zoals zoveel dingen komt het echt neer op het onthouden van de syntax. Maar als ontwikkelaars, zijn we tegelijkertijd de meest luie en efficiënte wezens op de planeet – dus elke vorm van steno of tijdsbesparing is het overwegen waard, komt Axios.
Betere foutafhandeling
Er is wat extra werk dat we moeten doen aan onze kant (opnieuw, zou kunnen worden aangevoerd dat dit gewoon een kwestie van syntaxis onthouden is) voor het gewenste resultaat als het gaat om het goed loggen van responsfouten met .fetch(). MDN legt uit:
Een
fetch()-belofte wordt afgewezen met eenTypeErrorwanneer een netwerkfout wordt aangetroffen of CORS verkeerd is geconfigureerd aan de serverzijde, hoewel dit meestal toestemmingsproblemen of iets dergelijks betekent – een 404 is bijvoorbeeld geen netwerkfout.
Laten we eens aannemen dat er iets mis is met onze baseUrl-variabele. De verwachte uitvoer van het volgende codeblok zou een fout zijn, maar in plaats daarvan is het ok. Waarom is dit?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Het blijkt dat fetch() alleen beloftes weigert in relatief zeldzame netwerkfout situaties zoals een DNS lookup mislukking. Gelukkig biedt fetch() een eenvoudige ok vlag die aangeeft of de status code van een antwoord al dan niet in het succesvolle bereik ligt. Over het algemeen zul je uiteindelijk een one-size-fits-all foutafhandeling functie schrijven om te gebruiken op al je fetch() calls.
Installatie van Axios
Het ophalen van nieuwe bibliotheken is makkelijk als taart deze dagen (Mmm.. rabarber), ik geef de voorkeur aan npm. Open terminal in de root van je project map, voer npm install axios uit en je bent klaar. Om nu dezelfde fetch aanvraag te doen die we eerder deden, kunnen we axios.get() aanroepen in plaats van onze fetch methode zoals dit:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Door axios te gebruiken verwijderen we de noodzaak om de resultaten van het HTTP verzoek door te geven aan de .json() methode. Axios geeft gewoon meteen het data object terug dat je verwacht. Bovendien zal elke soort fout bij een HTTP verzoek het .catch() blok meteen succesvol uitvoeren. Hier is een korte opsomming van alle primaire functies, inclusief een paar die ik niet direct vanaf de GitHub pagina heb behandeld:
- Maak XMLHttpRequests vanuit de browser
- Maak http requests vanuit node.js
- Ondersteunt de Promise API
- Onderschep verzoek en antwoord
- Verander verzoek en antwoord data
- Transformeer verzoeken
- Automatische transformaties voor JSON data
- Client side ondersteuning voor bescherming tegen XSRF
Samengevat is Axios meer een verbetering van de kwaliteit van leven dan wat dan ook. Maar het maken van vele kleine, incrementele aanpassingen aan de kwaliteit van het leven in je workflow kan de kwaliteit en snelheid van de ontwikkeling drastisch verbeteren.