I tillegg til den innebygde fetch()-funksjonen finnes det flere tredjepartsbiblioteker for å utføre HTTP-forespørsler i JavaScript. Et av de mest populære bibliotekene er Axios ( Axios Docs). Disse bibliotekene tilbyr ekstra funksjoner og fordeler som kan forenkle arbeidet med API-er og forbedre lesbarheten i koden.

Hvorfor bruke Axios eller andre biblioteker fremfor innebygd fetch()?

Selv om fetch()-API-et er kraftig, har det noen begrensninger som tredjepartsbiblioteker som Axios løser:

• Automatisk JSON-parsing: Axios parser JSON-responser automatisk, mens du med fetch() må kalle response.json() manuelt;
• Tidsavbrudd: Axios lar deg sette tidsavbrudd for forespørsler, noe som ikke støttes direkte av fetch();
• Interceptors for forespørsler og svar: Axios tilbyr interceptors som lar deg kjøre funksjoner før en forespørsel sendes eller etter at et svar mottas, noe som er nyttig for å legge til autentiseringstokener eller loggføre forespørsler;
• Enklere syntaks: Axios har en enklere og mer konsistent syntaks for å sende forespørsler og håndtere svar;
• Støtte for eldre nettlesere: Axios har innebygd støtte for eldre nettlesere som kanskje ikke støtter det innebygde fetch()-API-et fullt ut.

Grunnleggende bruk av Axios

Axios tilbyr en enkel syntaks for å utføre både GET- og POST-forespørsler. Det returnerer Promises, på samme måte som fetch(), men håndterer noen av de repeterende oppgavene som automatisk parsing av JSON.

GET-forespørsel med Axios

Dette eksempelet viser bruk av Axios for en GET-forespørsel. Funksjonen getPostWithAxios kaller axios.get() for å hente data fra et API-endepunkt (/posts/1). Axios forenkler prosessen ved automatisk å tolke JSON-responsen, slik at det ikke er nødvendig med et eget .json()-kall. Blokken try...catch håndterer eventuelle feil, og viser enten postens tittel eller en feilmelding i HTML-en.

POST-forespørsel med Axios

Dette eksemplet viser en POST-forespørsel ved bruk av Axios for å sende data til et API. Funksjonen sendPostWithAxios kaller axios.post() med API-endepunktet (/posts) og data for et nytt innlegg, inkludert title, body og userId. Axios sender automatisk dataene som JSON, noe som forenkler prosessen. Blokken try...catch håndterer eventuelle feil, og viser enten tittelen på det opprettede innlegget eller en feilmelding i HTML-en.

Feilhåndtering med Axios

Axios tilbyr en brukervennlig mekanisme for feilhåndtering. Hvis forespørselen mislykkes (for eksempel nettverksproblem eller serverfeil), kaster Axios automatisk en feil, som kan håndteres med try...catch.

Dette eksemplet viser feilhåndtering med Axios. Funksjonen getInvalidPost forsøker å hente data fra et ikke-eksisterende endepunkt ved bruk av axios.get(). Når forespørselen feiler, kaster Axios automatisk en feil. try...catch-blokken fanger denne feilen og viser feilmeldingen i HTML-en.

Tilleggsfunksjoner og fordeler med Axios

En gjennomgang av noen ekstra funksjoner i Axios.

Interceptorer for forespørsler og svar

Axios gir mulighet til å avskjære forespørsler og svar for å endre dem før de behandles. Dette er nyttig for å legge til autentiseringstokener, loggføre forespørsler eller håndtere global feilhåndtering.

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);
  }
);

Timeout-støtte

Axios lar deg angi tidsavbrudd for forespørsler, noe som sikrer at forespørselen ikke blir hengende uendelig.

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

Forenklet feilhåndtering

Axios kaster automatisk feil når en responsstatus faller utenfor 2xx-området, slik at du kan håndtere feil på en standardisert måte.

Nettleserstøtte

Axios fungerer i alle moderne nettlesere og tilbyr polyfills for eldre nettlesere, noe som gjør det til et mer allsidig alternativ for enkelte prosjekter.