Axios: wat is het, HTTP-verzoeken en basisprincipes van werken met API

Wat is Axios?

Axios is een JavaScript-bibliotheek voor het uitvoeren van HTTP-verzoeken vanuit de browser en de Node.js-omgeving. Het is gebouwd op XMLHttpRequest in de browser en de http-module in Node.js en biedt een uniforme API voor beide platforms.

Het belangrijkste voordeel van Axios ten opzichte van native fetch is automatische JSON-verwerking, ondersteuning voor interceptors en handigere foutafhandeling. In tegenstelling tot fetch heeft Axios geen twee .then-aanroepen nodig om de JSON-body van het antwoord te krijgen en gooit het automatisch een uitzondering bij HTTP-fouten (4xx, 5xx).

De bibliotheek ondersteunt alle belangrijke HTTP-methoden: GET, POST, PUT, DELETE, PATCH en HEAD. Het kan worden gebruikt in eenvoudige projecten en in grote bedrijfstoepassingen met honderdduizenden verzoeken per dag.

Belangrijkste kenmerken van Axios

• Promise API — alle bewerkingen retourneren een Promise, wat asynchrone code vereenvoudigt
• TypeScript-ondersteuning — volledige typering voor alle methoden en configuraties
• Interceptors — middleware voor het verwerken van verzoeken en antwoorden
• Transformatie — automatische conversie van gegevens bij invoer en uitvoer

Axios-architectuur en werkingsprincipe

De architectuur van Axios is gebaseerd op het concept van adapters. De bibliotheek abstraheert de transportlaag: in de browser wordt XMLHttpRequest gebruikt, in Node.js — de http- of https-module. Dit zorgt voor een uniforme interface, ongeacht de uitvoeringsomgeving.

Elk verzoek doorloopt een keten van interceptors die de configuratie van het verzoek of antwoord kunnen wijzigen. Na de interceptors wordt het verzoek doorgegeven aan de adapter die de daadwerkelijke HTTP-aanroep uitvoert. Het antwoord gaat vervolgens door de antwoordinterceptors voordat het de applicatiecode bereikt.

Levenscyclus van een Axios-verzoek

1. Configuratie maken — methode, URL, headers, verzoekbody
2. Request-interceptor — configuratie wijzigen, tokens toevoegen
3. HTTP-aanroep — uitvoering via browser- of Node.js-adapter
4. Response-interceptor — antwoord transformeren, fouten afhandelen
5. Resultaat retourneren — Promise wordt opgelost met gegevens of afgewezen

Belangrijkste mogelijkheden van Axios

Axios bevat tal van ingebouwde mogelijkheden die het een handige keuze maken voor het werken met HTTP in mobiele en webapplicaties. Laten we de belangrijkste bespreken.

Automatische gegevenstransformatie

Bij het verzenden van een verzoek converteert Axios automatisch een JavaScript-object naar een JSON-string met behulp van JSON.stringify. Bij het ontvangen van een antwoord parseert de bibliotheek de JSON terug naar een object. Dit bespaart de ontwikkelaar handmatige serialisatie en deserialisatie van gegevens.

CSRF-bescherming

In de browseromgeving voegt Axios automatisch XSRF-TOKEN-headers uit cookies toe, waarmee de applicatie wordt beschermd tegen cross-site request forgery. Hiervoor volstaat het om de server zo te configureren dat deze een token in een cookie met de naam XSRF-TOKEN verstuurt.

Time-outs en annuleren van verzoeken

De bibliotheek ondersteunt het instellen van een time-out via de parameter timeout en het annuleren van een verzoek via AbortController. Dit is vooral belangrijk in mobiele applicaties met een onstabiele verbinding, waar vastgelopen verzoeken batterij en dataverbruik kosten.

Axios installeren en configureren

Axios installeren gebeurt via elke pakketbeheerder. De bibliotheek is beschikbaar in de npm-registry en kan worden aangesloten in zowel Node.js als browserprojecten. Voor TypeScript zijn de typen opgenomen in het hoofdpakket; er zijn geen extra afhankelijkheden nodig.

Na installatie kunt u een instantie maken met een basisconfiguratie: basis-URL, standaard time-out, gemeenschappelijke headers. Dit voorkomt dat u dezelfde parameters in elk verzoek moet herhalen en biedt gecentraliseerd beheer van de HTTP-clientinstellingen.

# Installeren via npm
npm install axios

# Installeren via yarn
yarn add axios

# Installeren via pnpm
pnpm add axios

Een instantie maken met configuratie

Het wordt aanbevolen om voor elke API-service een afzonderlijke Axios-instantie te maken. Hiermee kunt u een basis-URL, standaardheaders en time-out instellen die van toepassing zijn op alle verzoeken van deze instantie zonder herhaling in elke aanroep.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Codevoorbeelden met Axios

Voorbeelden van verzoeken tonen de belangrijkste gebruikspatronen van Axios. Alle voorbeelden gebruiken async/await-syntaxis, die asynchrone code leesbaarder maakt in vergelijking met .then()-ketens.

GET-verzoek met parameters

Voor het ophalen van gegevens van de server wordt de methode axios.get gebruikt. Verzoekparameters worden doorgegeven via het params-object, dat automatisch wordt omgezet in een query-string. Het antwoord bevat gegevens in het veld data, status in status en headers in headers.

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('Fout bij laden van gebruikers', error);
    throw error;
  }
}

POST-verzoek met body

Voor het verzenden van gegevens naar de server wordt axios.post gebruikt. Het tweede argument is een object met gegevens dat Axios automatisch serialiseert naar JSON. Het contenttype Content-Type wordt standaard ingesteld op application/json.

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

Interceptors

Interceptors zijn middleware-functies die worden uitgevoerd voor elk verzoek of antwoord. Ze maken het mogelijk om autorisatietokens toe te voegen, verzoeken te loggen en fouten gecentraliseerd af te handelen. De request-interceptor voegt de Authorization-header toe met een token uit de opslag.

// Request-interceptor — voegt autorisatietoken toe
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Response-interceptor — verwerkt 401-fouten
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Foutafhandeling in Axios

Foutafhandeling in Axios is gebaseerd op het uitzonderingsmechanisme. In tegenstelling tot fetch onderschept Axios automatisch HTTP-fouten (4xx, 5xx) en geeft ze door aan het catch-blok. Het foutobject bevat informatie over het serverantwoord, het verzoek en de uitvoeringscontext.

Het is belangrijk onderscheid te maken tussen drie soorten fouten: serverantwoordfout (response), verzoekfout (request) en configuratiefout (config). De eerste treedt op bij een succesvolle HTTP-aanroep met een foutcode, de tweede — bij het uitblijven van een antwoord van de server, de derde — bij een onjuiste configuratie van het verzoek.

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('Antwoordfout', error.response.status);
      } else if (error.request) {
        console.warn('Geen antwoord van server');
      } else {
        console.warn('Configuratiefout');
      }
    }
  }
}

Axios vergelijken met Fetch API

Axios vergelijken met de native Fetch API helpt te begrijpen wanneer elke technologie geschikt is. Fetch is een ingebouwde browser-API die geen installatie vereist. Axios is een externe bibliotheek met extra mogelijkheden. Voor eenvoudige verzoeken is fetch voldoende, voor complexe applicaties met interceptors en gecentraliseerde foutafhandeling is Axios handiger.

Fetch beschouwt HTTP-fouten (4xx, 5xx) niet als uitzonderingen — u moet response.ok controleren. Fetch vereist twee .then()-aanroepen om JSON te krijgen: response.json() retourneert vervolgens een Promise met de gegevens. Axios doet dit automatisch. Fetch ondersteunt geen bestandsuploadvoortgang zonder extra polyfill. Axios heeft ingebouwde onUploadProgress en onDownloadProgress.

In Node.js is Fetch beschikbaar vanaf versie 18 als experimentele functie, terwijl Axios stabiel werkt vanaf Node.js 10. Voor projecten die oudere Node.js-versies ondersteunen, is de keuze duidelijk in het voordeel van Axios. Voor moderne browserprojecten zonder complexe verzoekverwerking kan fetch voldoende zijn.