Wat is een Promise?

Een Promise is een tijdelijke aanduiding voor een toekomstige waarde, die kan zijn:

Een promise start als pending en wordt definitief als fulfilled met een waarde of rejected met een reden.

Inzicht in resolve-, reject- en then()-methoden

Een Promise aanmaken

Om een Promise aan te maken, geef je een functie met twee parameters mee: resolve en reject. Deze parameters zijn functies die aangeven of de asynchrone operatie succesvol is afgerond of is mislukt.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});

• resolve(value): Markeert de Promise als vervuld (succesvol) en geeft het resultaat (value) door;
• reject(error): Markeert de Promise als afgewezen (mislukt) en geeft de fout door.

then() gebruiken om vervulde Promises af te handelen:

Zodra een Promise is aangemaakt, kun je het resultaat afhandelen met de then()-methode. Deze methode wordt aangeroepen wanneer de Promise is vervuld (resolved).

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

In dit voorbeeld ontvangt de then()-methode de waarde die aan resolve() is doorgegeven en voert de callback uit met het resultaat. Deze wordt alleen uitgevoerd als de Promise succesvol is opgelost.

Foutafhandeling met .catch()

Promises bieden een eenvoudige manier om fouten af te handelen via de .catch()-methode. Als een Promise wordt afgewezen (mislukt), wordt de fout opgevangen en afgehandeld binnen .catch().

catch()-methode wordt gebruikt om fouten af te handelen wanneer de Promise wordt afgewezen. Het vangt de fout op die door reject() wordt doorgegeven en stelt u in staat om faalscenario's te beheren.

Promises koppelen voor sequentiële asynchrone operaties

Een van de belangrijkste voordelen van Promises is de mogelijkheid om ze aan elkaar te koppelen, waardoor u meerdere asynchrone operaties na elkaar kunt uitvoeren zonder in callback hell te belanden. Elke then() retourneert een nieuwe Promise, waardoor u meerdere then()-aanroepen in een reeks kunt koppelen, met de resultaten weergegeven in de HTML zodra elke Promise wordt opgelost.

Sequentiële Operaties: Elke then() retourneert een nieuwe Promise, waarbij het resultaat van de ene bewerking naar de volgende wordt doorgegeven. Dit maakt een duidelijke, lineaire volgorde van asynchrone operaties mogelijk die de weergegeven tekst in HTML bijwerkt.

Foutafhandeling: De .catch()-methode behandelt elke fout die optreedt tijdens een van de Promise-resoluties. Dit zorgt ervoor dat fouten worden opgevangen en op de pagina worden weergegeven, ongeacht waar ze in de keten optreden.

Waarom Promises Gebruiken?

1. Voorkomen van Callback Hell: Promises bieden een schonere en beter leesbare manier om asynchrone operaties af te handelen dan diep geneste callbacks;
2. Foutafhandeling: Promises bieden ingebouwde foutafhandeling met .catch(), waardoor het eenvoudig is om geweigerde operaties af te handelen;
3. Sequentieel Koppelen: Met Promises kun je meerdere asynchrone operaties achter elkaar uitvoeren door middel van chaining, waardoor de code eenvoudiger te volgen en te onderhouden is.