Wat is axios?

Axios is een veel gebruikte library en biedt een handige API om HTTP request te maken vanuit de browser.

De API werkt als volgt: wil je een HTTP GET request maken dan gebruik je axios.get, wil je een HTTP DELETE request maken dan gebruik je axios.delete etc etc.

Hier een voorbeeld voor een GET request:

const { data } = await axios.get<Pokemon>(
  `/api/pokemon/${id}`
);

En een voorbeeld voor een POST request:

const { data } = await axios.post(
  '/api/pokemon',
  formData // Object die pokemon bevat
);

axios vs fetch

Waarom zou je axios gebruiken als je ook de fetch API van JavaScript kan gebruiken? Het antwoord is tweevoudig:

• JSON: 9 van de 10 keer verwachten we JSON terug. Axios gaat hier dan ook van uit. In fetch moet je altijd handidmatig nog een .json() doen op het Response object wat je terug krijgt.

  const response = await fetch(`/api/pokemon/${id}`);
  if (response.ok) {
    const json = await response.json()
  
    return json as Pokemon
  }

  Het gebruik van Axios scheelt dus wat vaak herhalende code.

• Progress: axios kan de voortgang in percentage van een request bijhouden. Handig voor een progress indicator bij file uploads. Dit kan fetch niet.

  Axios kan dit wel want het gebruikt achter de schermen een nog oudere JavaScript API namelijk: XMLHTTPRequest. Deze API biedt wel een manier van het bijhouden van progress / voortgang aan.

• Interceptors: mijn hoofdreden voor het gebruik van axios zijn de interceptors. Met een interceptor kan je stukken code schrijven die uit moeten worden gevoerd voor / na elk request / response.

  Met een interceptor kan je in één plek regelen wat er moet gebeuren in fout situaties bijvoorbeeld bij een 404 - not found of 403 - forbidden

  Een voorbeeld van error afhandeling in een Next.js applicatie, die bij elke HTTP status 404 een "niet gevonden" pagina toont.

  axios.interceptors.response.use(
    (response) => response,
    (error) => {
      if (
        axios.isAxiosError(error) && 
        error.response?.status === 404
      ) {
        return notFound();
      }
  
      return Promise.reject(error);
    }
  );

Nadelen axios

Het nadeel van axios is dat je wel extra JavaScript over de lijn moet sturen. Gelukkig is dat in het geval van Axios niet super veel, axios is ongeveer 16kb aan JavaScript.

Je moet het echter ook afstrepen tegen alle code die axios weer zorgt dat je niet nodig hebt.

Een groter nadeel vindt ik echter dat wanneer je axios in combinatie met de interceptors gebruikt, je goed moet opletten dat de interceptors er wel goed op staan!

Het is vrij makkelijk om per ongeluk axios ergens in een bestand te importeren, terwijl hij op dat moment nog niet met de interceptors is geconfigureerd.

Mijn tip is als volgt,maak een bestand waar je axios in configureerd:

// configure-axios.ts
import axios from 'axios';

// Configureer axios
axios.interceptors.response.use(
  // De interceptors zijn ingekort
);

/* 
  Ik exporteer bij deze dus de geconfigureerde axios.

  Overal waar ik axios gebruik doe ik dus ook een call
  naar `getAxios()`. Zo voorkom ik dat ik per ongeluk
  een niet geconfigureerde axios instance te pakken krijg.
*/
export function getAxios() {
  return axios;
}

Vervolgens gebruik je overal getAxios(), op deze manier weet je zeker dat je de geconfigureerde axios instance te pakken hebt.

Een ander nadeel is dat het een dependency is. Dit betekent dat wanneer de npm package wordt gekaapt / gehacked je de spreekwoordelijke Sjaak bent. In maart 2026 is het helaas axios overkomen.

Security issues rondom package managers zoals NPM, pip, uv, RubyGems, maven, gradle, NuGet, gebeuren steeds meer en meer. Dus wil je het echt safe spelen dan is geen dependency soms de beste dependency.