Ik ben erg enthousiast over Promises sinds ze een jaar geleden werden geïntroduceerd. Hoewel er veel posts en meningen rondzwerven, zullen Promises je code niet performanter maken… ze maken het makkelijker te lezen en te begrijpen (wat in mijn boek, vaak voor veel meer telt!)
Voor het eerste deel van deze post, zal ik de basisstructuur van promises uitleggen. Als je dat onder de knie hebt, scroll dan gerust naar de tweede helft van de post.
Promises explained in plain english
Hier is de basisstructuur van een Promise in Javascript:
Pretty typische (en ongrijpbare) snippet van code daar. Ik ga proberen te ontleden wat er aan de hand is.
Om te beginnen, concentreer je je alleen op de regels 1-15:
- Daar is de instantiatie. Deze regel creëert in principe een belofte. Een belofte in JS heeft iets nodig om te doen, een taak. Dus de functie die je hier doorgegeven ziet worden – function (resolve,reject) {…} is die taak
- Daarna zie je de body van de taak. Je kunt hier dingen doen. Ergens in dit blok van code, moet je beslissen of de dingen goed gingen of niet. Bijvoorbeeld, als je deze ruimte gebruikte om een afbeelding op te halen, heb je die ofwel ontvangen (ging goed)… of niet (niet zo goed).
- Als het goed ging, roep je een of andere functie aan die deze belofte als “opgelost” markeert. Als de dingen niet volgens plan zijn gegaan, zul je deze belofte “afwijzen”. (We zullen het hier dadelijk meer in detail over hebben)
Laten we ons nu richten op het resterende deel van de code snippet, regels 17-27:
- Tot nu toe, in regels 1-15, heb je alleen je Promise object gedefinieerd
- Op regel 17 & 22, koppel je er in principe een handlers aan
- promise.XXXX (waar XXX “.then” of “.catch” enz. kan zijn) voert in principe de functie uit die in de belofte is gedefinieerd (regels 1-15). Gebaseerd op hoe het ging (opgelost of afgewezen) zullen ze de functies in “.then” en “.catch” respectievelijk aanroepen. Dus als je belofte is opgelost (…dingen zijn goed gegaan), wordt de functie in .then(…) uitgevoerd, anders wordt de functie in .catch(…) uitgevoerd.
NOTE:
- “.then(function)” retourneert een belofte. Ook mag je alleen “.then(…)” of “.catch(…)” aanroepen op Promise-objecten.
Nu we de basis hebben behandeld, laten we eens kijken naar een interessanter voorbeeld van wat we kunnen doen met Promises.
Chaining Promises to perform multiple requests
Probleem: Onlangs kwam ik een situatie tegen waarin ik een aantal URL’s na elkaar moest ophalen. Het antwoord voor elke URL moest echter anders worden behandeld, afhankelijk van de URL.
Laten we er in het belang van dit bericht van uitgaan dat de URL’s die worden opgehaald zijn:
- google.com
- apple.com
- amazon.com
Hier volgt een vereenvoudigde versie van het script dat ik heb gebruikt om dit af te handelen:
Laten we dit eens uitsplitsen:
- Regels 1-11: Maak een eenvoudige wrapper rond de AJAX Get methode die door jQuery wordt geleverd. Dit zal gewoon doorgeven van de respons aan de callback gespecificeerd.
- Lines 18-51: Ik maak dan drie functies (ja! Functies!) die een JS Belofte terug
- Elke belofte intern doet dit – maakt gebruik van de Ajax-wrapper op te halen zijn url, en zodra de gegevens / respons is ontvangen, het doet iets met de gegevens en ten slotte roept “resolve()”
- In lijn 54: keten ik deze beloftes de een na de ander. Merk op, dat elk van deze functies een belofte retourneert (en op zichzelf geen belofte is). Daarom gebruik ik “first()”.then(…) in tegenstelling tot “first.then(…)”
Om het verder te verduidelijken, hier is een manier om te kijken naar de belofte keten.
Op deze manier kun je achtereenvolgens elke URL ophalen, deze naar wens afhandelen en de functie “resolved()” afvuren om de volgende belofte in de keten te activeren :
Note: als je het bovenstaande stukje code in de browser probeert uit te voeren, moet je CORS inschakelen. Hier is een Chrome-extensie die kan helpen dit te doen met een simpele klik.
Hoop dat je genoten hebt van deze post.