Wat is een API?

• API staat voor Application Programming Interface.
• Een API is een reeks regels en specificaties die softwareprogramma's kunnen volgen om met elkaar te communiceren.
• API's stellen verschillende softwaresystemen in staat om te interageren en gegevens uit te wisselen, ongeacht hun onderliggende architectuur of programmeertaal.
• API's vereenvoudigen de softwareontwikkeling door ontwikkelaars in staat te stellen vooraf gebouwde functionaliteiten te gebruiken, in plaats van code helemaal opnieuw te schrijven.

Soorten API's

• Web API's: Ontworpen om via internet te worden benaderd met behulp van het HTTP-protocol.
• RESTful API's: Representational State Transfer (REST) is een architecturale stijl voor het bouwen van web-API's die standaard HTTP-methoden (GET, POST, PUT, DELETE) gebruiken om resources te beheren.
• SOAP API's: Simple Object Access Protocol (SOAP) is een protocol voor het uitwisselen van gestructureerde informatie in webservices met behulp van XML.
• GraphQL API's: Een querytaal voor API's en een server-side runtime voor het uitvoeren van die queries, waardoor clients specifieke gegevens kunnen opvragen en over-fetching kunnen vermijden.
• Bibliotheek API's: API's geleverd door programmeertaalbibliotheken of frameworks, die vooraf gebouwde functies en klassen bieden die ontwikkelaars in hun applicaties kunnen gebruiken.
• Besturingssysteem API's: API's die door besturingssystemen worden geleverd om applicaties in staat te stellen te interageren met de OS-kernel en hardware.

Belangrijkste concepten van web-API's

• Eindpunten: Specifieke URL's die een API beschikbaar stelt, die resources of bewerkingen vertegenwoordigen.
• Requests: Berichten die van een client naar de API-server worden verzonden, waarin de gewenste actie en alle benodigde gegevens worden gespecificeerd.
• Responses: Berichten die van de API-server terug naar de client worden verzonden en de gevraagde gegevens bevatten of een indicatie van succes of mislukking.
• HTTP-methoden: Standaardmethoden die in web-API's worden gebruikt om acties uit te voeren op resources (bijv. GET voor het ophalen van gegevens, POST voor het maken van gegevens, PUT voor het bijwerken van gegevens, DELETE voor het verwijderen van gegevens).
• Statuscodes: Standaardcodes die worden gebruikt in HTTP-responses om de uitkomst van een request aan te geven (bijv. 200 OK, 400 Bad Request, 404 Not Found, 500 Internal Server Error).
• Gegevensformaten: Veelgebruikte formaten voor het uitwisselen van gegevens in API's, zoals JSON (JavaScript Object Notation) en XML (Extensible Markup Language).

API's gebruiken

• Authenticatie: Het verifiëren van de identiteit van de client die het API-request doet, vaak met behulp van API-sleutels, tokens of OAuth.
• Autorisatie: Bepalen of de geauthenticeerde client toestemming heeft om toegang te krijgen tot de gevraagde resource of de gevraagde actie uit te voeren.
• Rate limiting: Het beperken van het aantal requests dat een client binnen een bepaalde periode kan doen om misbruik te voorkomen en eerlijk gebruik te garanderen.
• Versioning: Het beheren van wijzigingen in de API in de loop van de tijd door verschillende versies te introduceren, waardoor clients kunnen kiezen welke versie ze willen gebruiken.
• Documentatie: Het verstrekken van duidelijke en uitgebreide documentatie voor de API, inclusief informatie over eindpunten, requestparameters, responseformaten en authenticatiemethoden.

JavaScript Basics

• JavaScript is een high-level, geïnterpreteerde programmeertaal.
• Het is dynamisch getypeerd, wat betekent dat variabeletypen tijdens runtime worden gecontroleerd.
• JavaScript wordt voornamelijk gebruikt voor het maken van interactieve webpagina's.
• Het kan ook server-side applicaties (Node.js), mobiele apps (React Native) en desktop apps (Electron) aandrijven.

Kernfuncties

• Variabelen: Worden gebruikt om gegevenswaarden op te slaan. Gedeclareerd met behulp van var, let of const.
• Gegevenstypen: Omvatten getallen, strings, booleans, null, undefined, symbolen en objecten.
• Operatoren: Voeren bewerkingen uit op variabelen en waarden (bijv. +, -, *, /, =, ==, ===, !=, !==, >, <, >=, <=).
• Control Flow: Beheert de uitvoering van code met behulp van conditionele statements (if, else if, else) en loops (for, while, do...while).
• Functies: Herbruikbare codeblokken die specifieke taken uitvoeren.
• Objecten: Verzamelingen van key-value paren, die entiteiten vertegenwoordigen met eigenschappen en methoden.
• Arrays: Geordende lijsten van waarden, toegankelijk via index.

Werken met de DOM

• Het Document Object Model (DOM) vertegenwoordigt de structuur van een HTML-document als een boom van objecten.
• JavaScript kan de DOM manipuleren om dynamisch de inhoud en het uiterlijk van webpagina's bij te werken.
• Algemene DOM-manipulatietaken omvatten:
  • Elementen selecteren: Met behulp van methoden zoals document.getElementById(), document.querySelector() en document.querySelectorAll().
  • Inhoud wijzigen: De tekst, attributen of stijlen van elementen wijzigen.
  • Elementen toevoegen en verwijderen: Nieuwe elementen maken en ze in de DOM invoegen of verwijderen.
  • Gebeurtenissen afhandelen: Reageren op gebruikersinteracties zoals klikken, muisaanwijzingen en formulierinzendingen.

Asynchrone JavaScript

• JavaScript is single-threaded, wat betekent dat het code sequentieel uitvoert.
• Asynchrone bewerkingen stellen JavaScript in staat taken uit te voeren zonder de hoofdthread te blokkeren, waardoor de responsiviteit wordt verbeterd.
• Algemene asynchrone technieken omvatten:
  • Callbacks: Functies die worden doorgegeven als argumenten aan andere functies en die worden uitgevoerd wanneer de asynchrone bewerking is voltooid.
  • Promises: Objecten die de uiteindelijke voltooiing (of mislukking) van een asynchrone bewerking vertegenwoordigen.
  • Async/Await: Syntactische suiker die bovenop promises is gebouwd, waardoor asynchrone code gemakkelijker te lezen en te schrijven is.

Fetch API

• De Fetch API biedt een moderne interface voor het maken van netwerkrequests in JavaScript.
• Het retourneert een Promise die wordt opgelost in de Response op dat request, of het nu succesvol is of niet.
• Het vervangt het oudere XMLHttpRequest (XHR) object.
• Fetch API gebruikt promises om de asynchrone aard van netwerkrequests af te handelen.
• Om een request te maken: fetch(url, options).
  • url: De URL waarnaar het request wordt gedaan.
  • options: Een optioneel object met instellingen die op het request moeten worden toegepast.

Algemene Fetch-opties

• method: Specificeert de HTTP-methode die moet worden gebruikt (bijv. 'GET', 'POST', 'PUT', 'DELETE'). De standaardwaarde is 'GET'.
• headers: Een object met HTTP-headers om met het request mee te sturen.
• body: De body van het request, die een string, een FormData-object of andere gegevensformaten kan zijn. Handig voor POST- en PUT-requests.
• mode: Definieert de modus van het request, zoals 'cors' voor cross-origin requests.

Een GET-request maken

• Om gegevens op te halen van een API-endpoint:

  fetch('https://api.example.com/data')
    .then(response => response.json()) // parse the JSON response
    .then(data => {
      // handle the data
      console.log(data);
    })
    .catch(error => {
      // handle errors
      console.error('Error:', error);
    });
  

Een POST-request maken

• Om gegevens naar een API-endpoint te verzenden:

  fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' }) // convert data to JSON
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
  

Responses afhandelen

• Het response-object dat door fetch() wordt geretourneerd, bevat informatie over de HTTP-response.
• response.status: De HTTP-statuscode (bijv. 200, 404, 500).
• response.ok: Een boolean die aangeeft of de response succesvol was (statuscode in het bereik 200-299).
• response.json(): Parseert de response body als JSON. Retourneert een promise.
• response.text(): Parseert de response body als tekst. Retourneert een promise.
• response.blob(): Parseert de response body als een Blob (Binary Large Object). Retourneert een promise.

Foutafhandeling

• Gebruik de .catch()-methode op de promise die door fetch() wordt geretourneerd, om fouten af te handelen.
• Controleer de eigenschap response.ok om HTTP-fouten af te handelen (bijv. 404, 500).
• Voorbeeld:

  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  

Async/Await met Fetch

• Async/await vereenvoudigt asynchrone code doordat u asynchrone bewerkingen in een synchrone stijl kunt schrijven.
• Declareer een async-functie en gebruik het await-keyword om te wachten tot promises zijn opgelost.
• Voorbeeld:

  async function getData() {
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error:', error);
    }
  }
  
  getData();
  

CORS

• Cross-Origin Resource Sharing (CORS) is een beveiligingsmechanisme dat door webbrowsers wordt geïmplementeerd.
• CORS beperkt webpagina's om requests te doen naar een ander domein dan het domein dat de webpagina heeft aangeboden.
• API's moeten worden geconfigureerd om cross-origin requests toe te staan door de juiste HTTP-headers in te stellen.
• Om CORS in te schakelen, moet de server de Access-Control-Allow-Origin-header in de response opnemen.
• De waarde instellen op * staat requests van elke origin toe, maar dit wordt over het algemeen niet aanbevolen om veiligheidsredenen.
• Het is beter om de exacte origin(s) op te geven die toegang hebben tot de API.