09. Promises

Basics

We gaan eerst een promise maken. Ga naar /09.promises/01.basics.html. Maak een promise object. Even een herhaling, een promise maak je zo:

let p = new Promise(function(resolve, reject) {
    ...
});

De promise accepteert een functie met twee argumenten, resolve en reject. Zorg ervoor dat je de promise 'resolved' na 5 seconden. Hint, iets uitvoeren na 5 seconden doe je met:

setTimeout(() => resolve("Dit zou na 5 seconden moeten verschijnen."), 5000);

Dit is hetzelfde als:

setTimeout(function() { 
    resolve("Dit zou na 5 seconden moeten verschijnen.");
}, 5000);

Het resultaat van de promise kun je gebruiken m.b.v. de functie then() welke een functie accepteert met het resultaat als argument.

p.then(function(result) {
});

Zorg er voor dat we het result naar de console loggen met console.log.

Klik hier voor een oplossing

```let p = new Promise(function(resolve, reject) { setTimeout(() => resolve("Dit zou na 5 seconden moeten verschijnen."), 5000); });```

Resultaat aanpassen

Open /09.promises/02.meer.html in de favo editor en browser. We gaan in deze file het asynchroon ophalen van een waarde simuleren, en het resultaat transformeren voordat we het doorgeven naar een afnemer.

We beginnen met het ophalen van de waarde. Pas de functie:

function haalWaardeOp() {
    return new Promise(function(resolve, reject) {
    });
}

zodanig aan dat we de juiste waarde 'resolven' (lees eerst door, je hebt nog niet voldoende info voor de implementatie). Pas daarna de functie:

function haalWaardePlusTweeOp() {
    return haalWaardeOp().then(function(result) {
        return hierMoetenWeEchteCodePlaatsen;
    })
}

aan zodat op de plaats van de hierMoetenWeEchteCodePlaatsen het resultaat aanpassen zodat het klopt. De functienaam geeft een hint. Door de waarde te returnen vanuit de then() functie maken we automatisch een nieuwe promise. Het resultaat van deze promise controleren en printen we met:

haalWaardePlusTweeOp().then(function(result) {
    console.assert(result === 4);
    console.log(result);
});

Errors

Kijk naar het de eerste promise p0 in /09.promises/03.errors.html. Deze promise is erg vreemd, want de promise zal nooit resolven, altijd rejecten. Ik zou je ook aanraden deze nooit te gebruiken :). Voor het voorbeeld wel handig, want kijk naar de p0.catch(). Deze functie 'vangt' de fout, hier kun je het probleem afhandelen.

Maar wat als we een exception gooien in de promise? 'Vangt' de catch functie deze ook? Vervang het commentaar in de promise p1 met het gooien van een exception. Dat doe je trouwens dmv:

throw new Error(msg); 

Controleer in de console van de Chrome dev tools of de catch ook echte exceptions afhandelt.

Combineren van promises

Stel, we hebben in onze clientside applicatie een persoon. We willen voor deze persoon de kinderen ophalen en welke auto de persoon bezit. Dit om te kunnen controleren of de auto genoeg plaatsen heeft voor alle kinderen. We zouden dit kunnen doen door eerst alle kinderen op te halen. Als alle kinderen opgehaald zijn, kunnen we de auto ophalen, om vervolgens de controle te doen met de gegevens. Maar dit is inefficiënt. Het ophalen van de kinderen kan 2 seconden duren, en het ophalen van de auto 3. Dit is samen 5 seconden wachttijd voor de gebruiker. Omdat het ophalen van een auto en kinderen niets met elkaar te maken heeft kunnen ze ook parallel. Dan is de wachttijd max 3 seconden in dit voorbeeld. Dit gaan we oefenen.

Ga naar /09.promises/04.composing-promises.html. Maak hier een promise voor het ophalen van kinderen. De promise moet resolven na een wachttijd van 3 seconden met de string "De kinderen verschijnen na 3 seconden". Maak nog een promise voor de auto. Deze promise heeft een wachttijd van 2 seconden en moet resolven met de string "De auto's verschijnen ook na 3 seconden". Bekijk het resultaat in de browser.

Klik hier voor een oplossing

```let kinderenPromise = new Promise(function(resolve, reject) { setTimeout(function() { resolve("De kinderen verschijnen na 3 seconden"); }, 3000); });```

Klik hier voor een oplossing

```let autoPromise = new Promise(function(resolve, reject) { setTimeout(function() { resolve("De auto's verschijnen ook na 3 seconden"); }, 2000); });```

Errors

Wat zal er gebeuren mocht één van beide promises niet resolven? Verwijder de code in de kinderenPromise en vervang dit door throw new Error("Er ging iets mis tijdens het ophalen van de kinderen"); om dit te controleren. Wat gebeurd er?

Klik hier voor een oplossing

Als er iets fout gaat in één van beide promises verliezen we het resultaat van beide. We komen in de catch en kunnen alleen de fout afhandelen. Het resultaat van de andere promise is verloren.