Inleiding tot promises in JavaScript

Je weet al dat het gebruik van het callback-model van asynchroon programmeren gemakkelijk leidt tot een situatie van callback hell. Daarom werd in JavaScript een nieuw model geïntroduceerd genaamd promises (promise). Laten we dit model bestuderen.

Een promise is een object waar een functie als parameter aan wordt doorgegeven, waarbinnen we onze asynchrone code moeten plaatsen:

let promise = new Promise(function() {
	// asynchrone code
});

Zoals je ziet, heb ik het object met de promise opgeslagen in de variabele promise. Op een andere plek in de code kan ik op deze variabele de methode then toepassen, waarbij ik een functie doorgeef met de code die moet worden uitgevoerd wanneer de asynchrone code, geschreven bij het aanmaken van deze promise, is voltooid:

promise.then(function() {
	// wordt uitgevoerd wanneer de asynchrone code is voltooid
});

Het klinkt verwarrend, dus laten we naar een voorbeeld kijken. Stel, ik heb de volgende asynchrone code:

setTimeout(function() {
	let result = [1, 2, 3, 4, 5];
}, 3000);

Stel dat ik voor dit voorbeeld onze hoofdtaak van asynchroon programmeren wil oplossen: een bepaald code uitvoeren nadat de timer is afgelopen. Hierbij wil ik deze code niet *in* de timer zelf plaatsen en wil ik dat het resultaat, dat ik in de variabele result heb geschreven, op de een of andere manier in deze code terechtkomt. We hebben deze taak in eerdere lessen opgelost via callbacks en subscriptions. Laten we nu eens kijken hoe we dit kunnen doen met promises.

Om te beginnen moeten we onze asynchrone code in een promise wrappen:

let promise = new Promise(function() {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

Dit is echter niet voldoende. We moeten expliciet aangeven dat onze asynchrone code is voltooid. Hierbij helpt een speciale voltooiingsfunctie, die automatisch in de eerste parameter van de functie terechtkomt, als deze is gespecificeerd:

let promise = new Promise(function(resolve) { // we specificeren de parameter
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

Met de voltooiingsfunctie kunnen we expliciet aangeven aan de promise dat de asynchrone code is voltooid. Hiervoor moeten we deze functie aanroepen op de gewenste plek:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(); // voltooi de promise
	}, 3000);
});

Als we een resultaat van de asynchrone code naar buiten willen sturen, kunnen we dit doorgeven als een parameter aan onze voltooiingsfunctie:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(result); // geef het resultaat door
	}, 3000);
});

We kunnen uiteraard de tussenliggende variabele weglaten:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		resolve([1, 2, 3, 4, 5]);
	}, 3000);
});

Nu kunnen we op elke andere plek de methode then van onze promise aanroepen:

promise.then(function() {
	// wordt geactiveerd wanneer de promise is voltooid
});

Het resultaat van de promise komt in de eerste parameter van de functie terecht, als we deze willen specificeren:

promise.then(function(result) {
	console.log(result); // geeft de array met het resultaat weer
});

Maak een promise, waarbinnen een vertraging van 5 seconden zit, waarna de promise moet worden voltooid, waarbij het een willekeurige tekst als resultaat teruggeeft. Geef deze tekst weer op het scherm.