Wat is een API en hoe werken we ermee?

In webontwikkeling stellen API's uw JavaScript-code in staat om te communiceren met externe diensten, zoals het ophalen van gegevens van een server, het verzenden van formuliergegevens of het integreren van diensten van derden.

In moderne JavaScript-toepassingen worden API's vaak gebruikt om:

• Gegevens van een server op te halen (bijvoorbeeld het verkrijgen van weergegevens, nieuwsartikelen of productinformatie);
• Gegevens naar een server te verzenden (bijvoorbeeld het indienen van een formulier of het opslaan van gebruikersvoorkeuren);
• Te werken met diensten van derden (bijvoorbeeld Google Maps, Twitter API, betalingsgateways).

We werken met API's door HTTP-verzoeken te sturen naar een API-endpoint, waarna de server reageert met gegevens, meestal in JSON-formaat.

HTTP-verzoeken verzenden met fetch()

De functie fetch() is een moderne methode om netwerkverzoeken te doen in JavaScript. Deze retourneert een Promise, die wordt opgelost wanneer het verzoek is voltooid.

Dit voorbeeld illustreert het uitvoeren van een HTTP GET-verzoek naar een API met behulp van fetch(). De functie fetchData verstuurt een verzoek naar het opgegeven endpoint (https://jsonplaceholder.typicode.com/posts/1). Zodra de respons is ontvangen, wordt met response.json() de JSON-data geparseerd. De titel van het bericht wordt vervolgens uit de geparseerde data gehaald en weergegeven in de HTML-paragraaf.

Omgaan met API-responses: JSON parsen en responsstatus controleren

Na het versturen van een API-verzoek is het belangrijk om te controleren of het verzoek succesvol was en de respons op de juiste manier te verwerken. In de meeste gevallen worden gegevens die door een API worden teruggegeven in JSON-formaat geleverd, dus moet je deze parsen met response.json().

Daarnaast moet je altijd de responsstatus controleren om te verzekeren dat het verzoek succesvol was (statuscode 200–299).

Dit voorbeeld toont het afhandelen van de response status van een API-verzoek. De functie fetchAndCheckStatus verstuurt een verzoek naar een API-endpoint en controleert vervolgens of de response succesvol is met behulp van response.ok, die true retourneert voor statuscodes in het bereik 200–299. Als het verzoek succesvol is, worden de JSON-gegevens geparseerd en weergegeven. Als het verzoek mislukt, wordt de foutstatuscode getoond in de HTML.

Foutafhandeling bij API's en omgaan met netwerkstoringen

Bij het werken met API's is het essentieel om mogelijke fouten af te handelen, zoals:

• Netwerkstoringen: De server kan onbereikbaar zijn door netwerkproblemen;
• Ongeldige responses: De API kan een fout retourneren (bijvoorbeeld 404 Not Found of 500 Server Error).

Fouten kunnen worden afgehandeld door gebruik te maken van try...catch in combinatie met fetch() om zowel netwerkfouten als API-responsefouten te beheren.

Dit voorbeeld toont hoe API-fouten effectief kunnen worden afgehandeld. De functie fetchWithErrorHandling gebruikt try...catch om zowel netwerkfouten als ongeldige API-responses te beheren. Als het verzoek naar de ongeldige URL mislukt, of als de statuscode van de response buiten het bereik van 200–299 valt, wordt er een fout gegenereerd met een specifiek bericht. Het catch-blok toont vervolgens het foutbericht in de HTML. Deze methode zorgt ervoor dat eventuele problemen met de API-aanroep, zoals een verkeerd eindpunt of verbindingsproblemen, op een nette manier worden afgehandeld en duidelijk aan de gebruiker worden gecommuniceerd.