Naast de native fetch()-functie zijn er verschillende externe bibliotheken beschikbaar voor het uitvoeren van HTTP-verzoeken in JavaScript. Een van de populairste bibliotheken is Axios ( Axios Docs). Deze bibliotheken bieden extra functionaliteiten en voordelen die het werken met API's kunnen vereenvoudigen en de leesbaarheid van de code verbeteren.

Waarom Axios of Andere Bibliotheken Gebruiken in Plaats van de Native fetch()?

Hoewel de fetch() API krachtig is, zijn er enkele beperkingen die externe bibliotheken zoals Axios aanpakken:

• Automatische JSON-parsing: Axios verwerkt JSON-responses automatisch, terwijl je bij fetch() handmatig response.json() moet aanroepen;
• Timeouts: Axios maakt het mogelijk om timeouts voor verzoeken in te stellen, wat niet standaard wordt ondersteund door fetch();
• Request- en Response-interceptors: Axios biedt interceptors waarmee functies kunnen worden uitgevoerd vóór het verzenden van een verzoek of na het ontvangen van een response, wat handig is voor bijvoorbeeld authenticatietokens of het loggen van verzoeken;
• Eenvoudigere syntaxis: Axios heeft een eenvoudigere en meer consistente syntaxis voor het uitvoeren van verzoeken en het verwerken van responses;
• Ondersteuning voor oudere browsers: Axios biedt ingebouwde ondersteuning voor oudere browsers die mogelijk geen volledige ondersteuning bieden voor de native fetch() API.

Basisgebruik van Axios

Axios biedt een eenvoudige syntaxis voor het uitvoeren van zowel GET- als POST-verzoeken. Het retourneert Promises, net als fetch(), maar handelt enkele repetitieve taken zoals het automatisch parsen van JSON af.

GET-verzoek met Axios

Dit voorbeeld toont het gebruik van Axios voor een GET-verzoek. De functie getPostWithAxios roept axios.get() aan om gegevens op te halen van een API-endpoint (/posts/1). Axios vereenvoudigt het proces door automatisch de JSON-respons te parseren, waardoor een aparte .json()-aanroep overbodig is. Het try...catch-blok verwerkt eventuele fouten en toont ofwel de titel van het bericht of een foutmelding in de HTML.

POST-verzoek met Axios

Dit voorbeeld toont een POST-verzoek met Axios om gegevens naar een API te verzenden. De functie sendPostWithAxios roept axios.post() aan met het API-eindpunt (/posts) en gegevens voor een nieuw bericht, waaronder title, body en userId. Axios verzendt de gegevens automatisch als JSON, wat het proces vereenvoudigt. Het try...catch-blok verwerkt eventuele fouten en toont ofwel de titel van het aangemaakte bericht of een foutmelding in de HTML.

Foutafhandeling met Axios

Axios biedt een gebruiksvriendelijke methode voor foutafhandeling. Als het verzoek mislukt (bijvoorbeeld door een netwerkprobleem of serverfout), genereert Axios automatisch een fout die kan worden afgehandeld met try...catch.

Dit voorbeeld toont foutafhandeling met Axios. De functie getInvalidPost probeert gegevens op te halen van een niet-bestaand eindpunt met behulp van axios.get(). Wanneer het verzoek mislukt, genereert Axios automatisch een fout. Het try...catch-blok vangt deze fout op en toont het foutbericht in de HTML.

Aanvullende functies en voordelen van Axios

Een overzicht van enkele extra mogelijkheden van Axios.

Request- en response-interceptors

Axios biedt de mogelijkheid om verzoeken en antwoorden te onderscheppen en aan te passen voordat ze worden verwerkt. Dit is nuttig voor het toevoegen van authenticatietokens, het loggen van verzoeken of het beheren van globale foutafhandeling.

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-ondersteuning

Axios maakt het mogelijk om time-outs voor verzoeken in te stellen, waardoor wordt gegarandeerd dat het verzoek niet oneindig blijft hangen.

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

Vereenvoudigde foutafhandeling

Axios genereert automatisch fouten wanneer een responstatus buiten het 2xx-bereik valt, zodat fouten op een gestandaardiseerde manier kunnen worden afgehandeld.

Browserondersteuning

Axios werkt in alle moderne browsers en biedt polyfills voor oudere browsers, waardoor het een veelzijdigere optie is voor sommige projecten.