Introduktion til promises i JavaScript

Du ved allerede, at brugen af callback-modellen for asynkronitet let fører til en situation kaldet callback hell. Derfor blev en ny model introduceret i JavaScript kaldet promises (promise). Lad os studere denne model.

Et promise er et objekt, hvor en funktion overføres som parameter, inden i hvilken vi skal placere vores asynkrone kode:

let promise = new Promise(function() {
	// asynkron kode
});

Som du kan se, har jeg gemt objektet med promise i variablen promise. På et andet sted i koden kan jeg anvende metoden then på denne variabel ved at sende en funktion med koden, der skal udføres, når den asynkrone kode, skrevet ved oprettelsen af dette promise, er afsluttet:

promise.then(function() {
	// udføres ved afslutning af den asynkrone kode
});

Det lyder forvirrende, så lad os se på et eksempel. Antag, at jeg har noget asynkron kode som dette:

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

Antag, at jeg vil løse vores hovedopgave for asynkronitet for det: at udføre noget kode efter timeren udløber. Samtidig ønsker jeg ikke at placere denne kode i selve timeren og vil gerne have, at resultatet, jeg skrev i variablen result, på en eller anden måde når frem til denne kode. I princippet har vi løst denne opgave i de foregående lektioner gennem callbacks og abonnementer. Lad os nu se på, hvordan man gør det med promises.

Først skal vi indkapsle vores asynkrone kode i et promise:

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

Dette er dog ikke nok. Vi skal eksplicit angive, at vores asynkrone kode er afsluttet. Her hjælper en speciel fuldførelsesfunktion os, som automatisk placeres i den første parameter af funktionen, hvis den er angivet:

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

Ved hjælp af fuldførelsesfunktionen kan vi eksplicit angive for promise, at den asynkrone kode er afsluttet. For at gøre dette skal vi kalde denne funktion på det ønskede sted:

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

Hvis vi ønsker at sende et eller andet resultat af den asynkrone kode videre, kan vi sende det som en parameter til vores fuldførelsesfunktion:

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

Man kan selvfølgelig også slippe af med mellemvariablen:

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

Nu kan vi på ethvert andet sted kalde metoden then på vores promise:

promise.then(function() {
	// udløses ved fuldførelse af promise
});

Resultatet af promise vil blive placeret i den første parameter af funktionen, hvis vi ønsker at angive den:

promise.then(function(result) {
	console.log(result); // udskriver array med resultatet
});

Lav et promise, inde i hvilket der er en forsinkelse på 5 sekunder, hvorefter promise skal fuldføres og returnere en eller anden tekst som sit resultat. Vis denne tekst på skærmen.