JavaScript

Wat is de Fetch API en hoe maak je HTTP requests?

Fetch API maakt HTTP requests vanuit JavaScript naar servers.

Home/Categorieën/JavaScript/Wat is de Fetch API en hoe maak je HTTP requests?

Fetch syntax

fetch(url, { method: 'GET', headers: {...}, body: JSON.stringify(...) }) Returns Promise Response moet parsed worden (json(), text(), blob())

REST methods

GET - ophalen van data POST - nieuwe data toevoegen PUT/PATCH - bestaande data updaten DELETE - verwijderen

Code Voorbeelden

JAVASCRIPTFetch GET en POST
// GET request
async function fetchUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error('Error:', err);
  }
}

// POST request
async function createUser(userData) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData)
  });
  
  const newUser = await response.json();
  console.log('Created:', newUser);
}

// PUT request (update)
async function updateUser(id, userData) {
  const response = await fetch(`https://api.example.com/users/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  return response.json();
}

// DELETE request
async function deleteUser(id) {
  await fetch(`https://api.example.com/users/${id}`, {
    method: 'DELETE'
  });
}

💡 Praktijk Tips

Altijd try/catch gebruiken. Controleer response.ok voordat je response.json() aanroept.

Relevante trefwoorden

fetchAPIasyncHTTP
← Terug naar JavaScriptAlle categorieën →