JavaScript Promises: resolve, reject, then en catch

• maPromesse is de variabele met het Promise-object.
• resolve en reject zijn functies die de constructor Promise aanlevert.
• De code binnen de functie bepaalt wat de promise doet.
• Lukt de actie, dan roep je resolve aan met een succesbericht (optioneel).
• Mislukt de actie, dan roep je reject aan met een foutmelding (optioneel).

Werken met een promise

Het resultaat van een promise handel je af met de methoden .then() en .catch():

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• .then() draait wanneer de promise vervuld is. Het succesbericht komt binnen als argument.
• .catch() draait wanneer de promise afgewezen is. De foutmelding komt binnen als argument.

Wanneer je ze gebruikt

Promises zijn handig voor asynchrone bewerkingen, zoals het downloaden van een afbeelding van een server. In plaats van de code te blokkeren tot het downloaden klaar is, laat de promise de rest gewoon doorlopen en handel je het resultaat af zodra het binnen is.

Callbacks vervangen

Promises zijn een leesbaarder alternatief voor geneste callbacks. Hier is een functie met callbacks, omgezet naar een functie met een promise:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Code van de functie ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Code van de functie ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

Met .then() en .catch() wordt de code duidelijker en blijf je weg bij de “ callback hell ”.

Geavanceerde methoden

• Promise.all(): draait meerdere promises parallel en geeft een array met de resultaten terug zodra alle promises vervuld zijn.
• Promise.race(): draait meerdere promises parallel en geeft het resultaat terug van de eerste promise die vervuld of afgewezen wordt.

Conclusie

Promises zijn een krachtig middel om asynchrone bewerkingen in JavaScript af te handelen. Ze leveren leesbaarder code op en houden de problemen van geneste callbacks buiten de deur. Speel gerust met de voorbeelden uit de video en oefen ermee om dit essentiële concept onder de knie te krijgen.

Promises in JavaScript lijken op het eerste gezicht ingewikkeld, maar in werkelijkheid vallen ze mee. Deze tutorial, gebaseerd op de video “ JavaScript Promises In 10 Minutes ” van Web Dev Simplified, loodst je door de belangrijkste begrippen en de syntaxis van promises.

Het basisidee

Een promise in JavaScript lijkt op een belofte in het echte leven. Je zegt toe iets te doen, en die belofte kan twee uitkomsten hebben:

• Vervuld (Resolved): de belofte is met succes nagekomen.
• Afgewezen (Rejected): de belofte kon niet worden nagekomen.
•  

Syntaxis

Een promise maak je met de constructor Promise:

const succes = true; // vervang door je eigen voorwaarde

let maPromesse = new Promise((resolve, reject) => {
  // Code om de belofte na te komen
  if (succes) {
    resolve("Message de succès");
  } else {
    reject("Message d'échec");
  }
});

In dit voorbeeld:

• maPromesse is de variabele met het Promise-object.
• resolve en reject zijn functies die de constructor Promise aanlevert.
• De code binnen de functie bepaalt wat de promise doet.
• Lukt de actie, dan roep je resolve aan met een succesbericht (optioneel).
• Mislukt de actie, dan roep je reject aan met een foutmelding (optioneel).

Werken met een promise

Het resultaat van een promise handel je af met de methoden .then() en .catch():

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• .then() draait wanneer de promise vervuld is. Het succesbericht komt binnen als argument.
• .catch() draait wanneer de promise afgewezen is. De foutmelding komt binnen als argument.

Wanneer je ze gebruikt

Promises zijn handig voor asynchrone bewerkingen, zoals het downloaden van een afbeelding van een server. In plaats van de code te blokkeren tot het downloaden klaar is, laat de promise de rest gewoon doorlopen en handel je het resultaat af zodra het binnen is.

Callbacks vervangen

Promises zijn een leesbaarder alternatief voor geneste callbacks. Hier is een functie met callbacks, omgezet naar een functie met een promise:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Code van de functie ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Code van de functie ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

Met .then() en .catch() wordt de code duidelijker en blijf je weg bij de “ callback hell ”.

Geavanceerde methoden

• Promise.all(): draait meerdere promises parallel en geeft een array met de resultaten terug zodra alle promises vervuld zijn.
• Promise.race(): draait meerdere promises parallel en geeft het resultaat terug van de eerste promise die vervuld of afgewezen wordt.

Conclusie

Promises zijn een krachtig middel om asynchrone bewerkingen in JavaScript af te handelen. Ze leveren leesbaarder code op en houden de problemen van geneste callbacks buiten de deur. Speel gerust met de voorbeelden uit de video en oefen ermee om dit essentiële concept onder de knie te krijgen.