Native fetch()-funktion lisäksi JavaScriptissä on saatavilla useita kolmannen osapuolen kirjastoja HTTP-pyyntöjen tekemiseen. Yksi suosituimmista kirjastoista on Axios ( Axios Docs). Nämä kirjastot tarjoavat lisäominaisuuksia ja etuja, jotka voivat yksinkertaistaa API:en kanssa työskentelyä ja parantaa koodin luettavuutta.

Miksi käyttää Axiosia tai muita kirjastoja natiivin fetch()-funktion sijaan?

Vaikka fetch()-API on tehokas, siinä on joitakin rajoituksia, joita kolmannen osapuolen kirjastot kuten Axios ratkaisevat:

• Automaattinen JSON-jäsennys: Axios jäsentää JSON-vastaukset automaattisesti, kun taas fetch()-funktion kanssa tämä täytyy tehdä manuaalisesti kutsumalla response.json();
• Aikakatkaisut: Axios mahdollistaa aikakatkaisujen asettamisen pyynnöille, mikä ei ole natiivisti tuettu fetch()-funktiossa;
• Pyyntö- ja vastausinterseptorit: Axios tarjoaa interseptoreita, joiden avulla voidaan suorittaa funktioita ennen pyynnön lähettämistä tai vastauksen vastaanottamisen jälkeen. Tämä on hyödyllistä esimerkiksi autentikointitunnisteiden lisäämisessä tai pyyntöjen lokituksessa;
• Yksinkertaisempi syntaksi: Axiosilla on yksinkertaisempi ja johdonmukaisempi syntaksi pyyntöjen tekemiseen ja vastausten käsittelyyn;
• Tuki vanhemmille selaimille: Axios sisältää tuen vanhemmille selaimille, jotka eivät välttämättä tue natiivia fetch()-API:a täysin.

Axioksen peruskäyttö

Axios tarjoaa yksinkertaisen syntaksin sekä GET- että POST-pyyntöjen tekemiseen. Se palauttaa Promise-olioita aivan kuten fetch(), mutta hoitaa automaattisesti joitakin toistuvia tehtäviä, kuten JSON-jäsennyksen.

GET-pyyntö Axiosilla

Tämä esimerkki havainnollistaa Axios-kirjaston käyttöä GET-pyynnössä. getPostWithAxios-funktio kutsuu axios.get()-metodia hakeakseen tietoja API-päätepisteestä (/posts/1). Axios yksinkertaistaa prosessia jäsentämällä JSON-vastauksen automaattisesti, jolloin erillistä .json()-kutsua ei tarvita. try...catch-lohko käsittelee mahdolliset virheet ja näyttää joko viestin otsikon tai virheilmoituksen HTML:ssä.

POST-pyyntö Axiosilla

Tämä esimerkki havainnollistaa POST-pyynnön tekemistä Axios-kirjastolla tiedon lähettämiseksi API-rajapintaan. sendPostWithAxios-funktio kutsuu axios.post()-metodia API-päätepisteeseen (/posts) ja lähettää uuden viestin tiedot, kuten title, body ja userId. Axios lähettää tiedot automaattisesti JSON-muodossa, mikä yksinkertaistaa prosessia. try...catch-lohko käsittelee mahdolliset virheet ja näyttää joko luodun viestin otsikon tai virheilmoituksen HTML:ssä.

Virheiden käsittely Axiosilla

Axios tarjoaa helppokäyttöisen mekanismin virheiden käsittelyyn. Jos pyyntö epäonnistuu (esimerkiksi verkkovirhe tai palvelinvirhe), Axios heittää automaattisesti virheen, joka voidaan käsitellä try...catch-rakenteella.

Tämä esimerkki havainnollistaa virheenkäsittelyä Axiosin avulla. getInvalidPost-funktio yrittää hakea tietoja olemattomasta päätepisteestä käyttäen axios.get(). Kun pyyntö epäonnistuu, Axios heittää automaattisesti virheen. try...catch-lohko sieppaa tämän virheen ja näyttää virheilmoituksen HTML:ssä.

Axiosin lisäominaisuudet ja hyödyt

Tarkastellaan joitakin Axiosin lisäominaisuuksia.

Pyyntöjen ja vastausten siepparit

Axios mahdollistaa pyyntöjen ja vastausten sieppaamisen, jolloin niitä voidaan muokata ennen käsittelyä. Tämä on hyödyllistä esimerkiksi autentikointitunnisteiden lisäämisessä, pyyntöjen lokituksessa tai yleisessä virheiden hallinnassa.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Aikakatkaisun tuki

Axios mahdollistaa aikakatkaisujen asettamisen pyynnöille, mikä varmistaa, ettei pyyntö jää odottamaan loputtomasti.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Yksinkertaistettu virheenkäsittely

Axios heittää automaattisesti virheen, kun vastaustila ei ole 2xx-välillä, joten epäonnistumiset voidaan käsitellä yhdenmukaisesti.

Selainyhteensopivuus

Axios toimii kaikissa nykyaikaisissa selaimissa ja tarjoaa polyfill-tuen vanhemmille selaimille, mikä tekee siitä monipuolisemman vaihtoehdon joihinkin projekteihin.