Direct naar de hoofdinhoud
Module 7 · Les 1 van 425/32 in de cursus~12 min
Modulelessen (1/4)

Beloften: wat ze zijn

Een Promise is een waarde die het resultaat vertegenwoordigt van een bewerking die in de toekomst zal worden voltooid. Het kan zich in een van de volgende drie toestanden bevinden:

  • in behandeling — de bewerking wordt nog uitgevoerd
  • vervuld — het is succesvol afgerond, er is een waarde
  • afgewezen — het is mislukt, er is een fout opgetreden

Zodra het de hangende staat verlaat, is het voor altijd "afgewikkeld".

Een opgeloste belofte creëren

De twee meest voorkomende manieren: u zult bijna nooit een belofte "met de hand" maken met de constructor:

JS
const p1 = Promise.resolve(42);
const p2 = Promise.reject(new Error('oops'));

Het resultaat lezen: .then / .catch

JS
Promise.resolve(10).then((v) => {
  console.log(v); // 10
});

Promise.reject(new Error('no')).catch((e) => {
  console.log(e.message); // 'no'
});

.then ontvangt een functie die wordt aangeroepen met de opgeloste waarde. .catch ontvangt een functie die wordt aangeroepen met de fout in geval van afwijzing.

Keten

Elke .then retourneert op zijn beurt een belofte: je kunt ze aan elkaar koppelen om de waarde stap voor stap.

JS
Promise.resolve(5)
  .then((n) => n * 2)
  .then((n) => n + 1)
  .then((n) => console.log(n)); // 11

Als een van de .then een belofte gooit (of een belofte retourneert die mislukt), wordt uitvoering springt naar de eerste volgende .catch.

Constructeur (zeldzaam)

JS
const p = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) resolve('ok');
  else reject(new Error('no'));
});

Je zult het alleen gebruiken als je iets moet "beloven" dat callbacks gebruikt (bijvoorbeeld oude DOM API's of setTimeout).

Probeer het

Oefening#js.m7.l1.e1
Pogingen: 0Laden…

Definieer `promisedVersion(n)` dat, gegeven een getal, een Promise retourneert die is opgelost met het dubbele van n.

Editor laden…
Toon hint

return Promise.resolve(n * 2)

Oplossing beschikbaar na 3 pogingen

Oefening beoordelen

Oefening#js.m7.l1.e2
Pogingen: 0Laden…

Definieer `incrementThree(p)` dat een belofte van een getal ontvangt en een belofte van het getal + 3 retourneert. Gebruik een .then-keten.

Editor laden…
Toon hint

p.dan((n) => n + 3)

Oplossing beschikbaar na 3 pogingen