Wat accepteert de fetch-methode?

De fetch-methode accepteert één verplicht argument — het pad naar de aanvraag (RequestInfo of URL) — en één optioneel argument — een configuratieobject (RequestInit).

Verplicht argument (input) :

• String: URL van de bron.
• Request-object: Een instantie van de klasse Request, die een flexibelere configuratie van de aanvraag mogelijk maakt (headers, methode, etc.).

Optioneel argument (init) : Een object met velden die de configuratie van de aanvraag beschrijven. Enkele veelgebruikte velden:

• method: HTTP-methode van de aanvraag (GET, POST, PUT, DELETE, OPTIONS, etc.).
• headers: Headers van de aanvraag. Kan een sleutel-waarde-object of een instantie van de klasse Headers zijn.
• body: Lichaam van de aanvraag (voor methoden anders dan GET of HEAD). Kan een string, ArrayBuffer, TypedArray, DataView, Blob, FormData, URLSearchParams of ReadableStream zijn.
• mode: Modus van de aanvraag (cors, no-cors, same-origin, navigate).
• credentials: Instelling voor het verzenden van inloggegevens (omit, same-origin, include).
• cache: Cache-instelling (default, no-store, reload, no-cache, force-cache, only-if-cached).
• redirect: Hoe om te gaan met doorverwijzingen (follow, error, manual).
• referrer: Waarde voor de header Referer.
• referrerPolicy: Beleid voor het doorgeven van de Referer-header.
• integrity: Waarde voor de header Integrity. Gebruikt voor Subresource Integrity.
• keepalive: Booleaanse waarde die aangeeft dat de aanvraag actief moet blijven nadat de pagina is gesloten (bijvoorbeeld voor het verzenden van analyses of rapporten).
• signal: Een instantie van AbortSignal om de aanvraag te annuleren.
• window: Het Window-object waarmee de aanvraag is geassocieerd (standaard het huidige venster).

Voorbeeld van gebruik:

// GET-aanvraag
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fout:', error));

// POST-aanvraag met body en headers
fetch('/api/products', {
  method: 'POST', // HTTP-methode
  headers: {
    'Content-Type': 'application/json', // Verzendtype
    'Authorization': 'Bearer your_token' // Voorbeeld van autorisatieheader
  },
  body: JSON.stringify({ name: 'Nieuw product', price: 100 }) // Aanvraagbody
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP-fout! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log('Succes:', data))
  .catch(error => console.error('Fout:', error));