Wat is een Promise in JavaScript?

Een Promise is een object in JavaScript dat een asynchrone taak representeert die in de toekomst kan worden voltooid. Het is als een belofte: “Ik beloof je het resultaat te geven wanneer de taak is voltooid”. Een Promise kan zich in een van de volgende drie statussen bevinden:

• Pending (in afwachting): de initiële status, nog niet voltooid of afgewezen.
• Fulfilled (voltooid): de taak is succesvol voltooid.
• Rejected (afgewezen): de taak is mislukt.

Waarom Promises gebruiken?

Voordat Promises bestonden, werden callbacks gebruikt om asynchrone taken af te handelen. Het nesten van meerdere callbacks leidde echter tot “Callback Hell”, waardoor code moeilijk leesbaar en te onderhouden was. Promises lossen dit probleem op door een duidelijke en lineaire codeerstijl te bieden, waardoor asynchrone taken en foutafhandeling gemakkelijker te beheren zijn.

Promises gebruiken in JavaScript

Een Promise aanmaken

Om een Promise aan te maken, gebruik je new Promise en geef je een executor-functie mee met twee parameters: resolve en reject. resolve wordt aangeroepen wanneer de Promise succesvol is voltooid, reject wordt aangeroepen wanneer de Promise wordt afgewezen.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('Success!');
    } else {
      reject('Failed!');
    }
  }, 1000);
});

In dit voorbeeld wordt de Promise na 1 seconde voltooid met het resultaat “Success!” of afgewezen met “Failed!”.

Resultaten verwerken met .then() en .catch()

Om het resultaat van een Promise te ontvangen, kun je de methoden .then() en .catch() gebruiken. .then(onFulfilled) wordt aangeroepen wanneer de Promise is voltooid, .catch(onRejected) wordt aangeroepen wanneer de Promise is afgewezen.

promise
  .then((result) => {
    console.log(result); // "Success!"
  })
  .catch((error) => {
    console.error(error); // "Failed!"
  });

Promises aan elkaar koppelen (Chaining)

Je kunt Promises aan elkaar koppelen door een Promise te retourneren in .then().

firstPromise()
  .then((result1) => {
    return secondPromise(result1);
  })
  .then((result2) => {
    console.log(result2);
  })
  .catch((error) => {
    console.error(error);
  });

Promise.all gebruiken

Promise.all stelt ons in staat om meerdere Promises parallel uit te voeren en de resultaten te ontvangen wanneer ze allemaal zijn voltooid.

const promise1 = fetchData1();
const promise2 = fetchData2();

Promise.all([promise1, promise2])
  .then(([result1, result2]) => {
    console.log(result1, result2);
  })
  .catch((error) => {
    console.error(error);
  });

Behandel fouten altijd met .catch(). Als je dit overslaat, kunnen fouten onopgemerkt blijven en problemen veroorzaken die moeilijk te debuggen zijn.

Promises gebruiken in React

In React is het vaak nodig om asynchrone taken uit te voeren, zoals het ophalen van data via een API. Promises helpen bij het efficiënt beheren van deze taken.

Fetch API gebruiken met Promises

fetch is een ingebouwde API in JavaScript voor het ophalen van data, en retourneert een Promise.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Fout:', error);
  });

In dit voorbeeld roepen we de API aan op: https://jsonplaceholder.typicode.com/users om een lijst met gebruikers op te halen.

Promise en useEffect gebruiken in een component

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
      })
      .catch((error) => {
        console.error('Fout:', error);
      });
  }, []);

  return (
    <div>
      {users ? (
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

export default UserList;

• useEffect met een lege dependency array [] wordt slechts één keer uitgevoerd wanneer de component wordt gemount.
• fetch wordt gebruikt om de API aan te roepen en de users state bij te werken wanneer het resultaat is ontvangen.

Promise versus Async/Await

Async/Await is een nieuwe syntaxis gebaseerd op Promises, waardoor code eruitziet als synchrone code en gemakkelijker te lezen en begrijpen is. Het gebruikt try...catch voor foutafhandeling en vermijdt overmatig nesten van .then(). Async/Await vereist echter wel een goed begrip van Promises. Gebruik Async/Await wanneer je code er synchroon uit wilt laten zien, leesbaar wilt houden en asynchrone taken sequentieel wilt uitvoeren. Gebruik Promises wanneer je meerdere asynchrone taken tegelijk wilt beheren en methoden zoals Promise.all en Promise.race nodig hebt.