Vähän pitkälti itseoppineena ohjelmistokehittäjänä olen käynyt läpi maksuttomien ja maksullisten internet-opetuskirjojen laajan maailman. Näen HTTP-pyyntöjä tekevissä opetusohjelmissa yhä uudestaan ja uudestaan, että niissä käytetään JavaScript-kirjastoa nimeltä Axios. Halusin ymmärtää, miksi niin monenlaiset web-kehityskouluttajat käyttävät tätä näennäisesti huomaamatonta kirjastoa. Niinpä päätin kaivautua toimittamaan hyvin yksinkertaisen ja suoraviivaisen selityksen siitä, mitä Axios tarjoaa ja miksi sitä (luultavasti) kannattaa käyttää.
Mitä se tekee
Lyhyesti sanottuna Axios on Javascript-kirjasto, jota käytetään HTTP-pyyntöjen tekemiseen node.js:stä tai selaimesta tulevien XMLHttpRequests-pyyntöjen tekemiseen, ja joka tukee myös ES6:n Promise API:ta. Hienoa, tästä voimme päätellä, että se tekee jotain sellaista, mitä osaamme jo tehdä ja jota on hiljattain parannettu merkittävästi… Joten miksi vaivautua?
Mitä se pyrkii parantamaan: .fetch()
Fetch käyttää kaksivaiheista prosessia käsitellessään JSON-dataa; alkuperäisen pyynnön tekemisen jälkeen sinun täytyy kutsua .json()-metodia vastauksessa saadaksesi varsinaisen dataobjektin. Jos minulla olisi fetch-pyyntö saadakseni takaisin objektin asiaankuuluvista kuljettajista kimppakyytejä hankkivaa sovellustani varten, saattaisin saada jotain seuraavan kaltaista:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Tämä palauttaisi odottavan lupauksen ja vastausobjektin, joka kertoisi minulle, että pyyntöni onnistui, mutta missä on datani?! Meidän on muistettava välittää vastauksemme myös .json()-metodille.
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Nyt tämä ei ole iso juttu, kuten monessa muussakin asiassa kyse on oikeastaan syntaksin muistamisesta. Mutta kehittäjinä olemme samanaikaisesti maailman laiskimpia ja tehokkaimpia olentoja – joten mikä tahansa lyhennelmä tai ajansäästö on harkitsemisen arvoinen, syöttää Axios.
parempi virheenkäsittely
Tässä on jonkin verran ylimääräistä työtä, jota meidän on tehtävä omalta osaltamme (jälleen kerran voidaan väittää, että kyse on vain syntaksin ulkoa opettelemisesta) halutun lopputuloksen aikaansaamiseksi, kun on kyse vastausvirheiden kunnollisesta kirjaamisesta vastauksen virheiden .fetch() avulla. MDN selittää:
A
fetch()-lupaus hylkääTypeError:llä, kun verkkovirhe kohdataan tai CORS on konfiguroitu väärin palvelimen puolella, vaikka tämä tarkoittaa yleensä käyttöoikeusongelmia tai muuta vastaavaa – esimerkiksi 404 ei ole verkkovirhe.
Emme oleta, että baseUrl-muuttujassamme baseUrl on jotain vikaa. Seuraavan koodilohkon tulosteen odotusarvo olisi virhe, mutta sen sijaan se on ok. Miksi näin?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Kävi ilmi, että fetch() hylkää lupaukset vain suhteellisen harvinaisissa verkkovirhetilanteissa, kuten DNS-haun epäonnistumisessa. Onneksi fetch() tarjoaa yksinkertaisen ok-lipun, joka ilmaisee, onko vastauksen tilakoodi onnistunut vai ei. Yleensä päädyt kirjoittamaan yhden ainoan virheenkäsittelyfunktion, jota käytetään kaikissa fetch()-kutsuissasi.
Axiosin asentaminen
Uusien kirjastojen hankkiminen on nykyään helppoa kuin mikä (Mmm… raparperi), suosin npm:ää. Avaa projektikansiosi juuressa oleva terminaali, suorita npm install axios ja olet valmis. Saavuttaaksemme nyt saman noutopyynnön, jonka suoritimme aiemmin, voimme kutsua axios.get() noutomenetelmämme sijasta näin:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Käyttämällä axiosia poistamme tarpeen välittää HTTP-pyynnön tulokset .json()-metodille. Axios yksinkertaisesti palauttaa odotetun dataobjektin heti. Lisäksi kaikenlaiset virheet HTTP-pyynnössä suorittavat onnistuneesti .catch()-lohkon heti alkuunsa. Tässä on lyhyt yhteenveto kaikista sen tärkeimmistä ominaisuuksista, mukaan lukien muutama, joita en käsitellyt suoraan GitHub-sivulta:
- Tehdä XMLHttpRequests selaimesta
- Tehdä http-pyyntöjä noodista.js
- Tukee Promise API:ta
- Pyynnön ja vastauksen sieppaaminen
- Pyynnön ja vastauksen datan muuntaminen
- Pyyntöjen peruuttaminen
- Automaattiset muunnokset JSON-datalle
- Asiakaspuolen tuki XSRF:ltä suojautumiselle
Yhteenvetona voidaan todeta, että Axios on elämänlaadun parannus enemmän kuin mikään muu. Mutta tekemällä monia pieniä, inkrementaalisia elämänlaadun säätöjä työnkulkuunsa voi parantaa huomattavasti kehityksen laatua ja nopeutta.