Introduksjon til promises i JavaScript

Du vet allerede at bruk av callback-modellen for asynkronitet enkelt fører til en situasjon kalt callback hell. Derfor ble en ny modell introdusert i JavaScript kalt promises (promise). La oss studere denne modellen.

Et promise representerer et objekt, der en funksjon sendes som en parameter, og inni denne funksjonen skal vi plassere vår asynkrone kode:

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

Som du ser, skrev jeg objektet med promise i variabelen promise. Et annet sted i koden kan jeg bruke then-metoden på denne variabelen, og sende inn en funksjon med koden som skal utføres når den asynkrone koden, skrevet ved opprettelsen av dette promise, er fullført:

promise.then(function() {
	// vil utføres når den asynkrone koden er fullført
});

Høres forvirrende ut, så la oss se på et eksempel. La oss si at jeg har en asynkron kode som dette:

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

La oss si at jeg vil løse vår hoved- oppgave med asynkronitet for denne: å utføre en viss kode etter at timeren utløses. Samtidig ønsker jeg ikke å plassere denne koden inne i selve timeren og ønsker at resultatet, som jeg skrev i variabelen result, på en måte skal komme med i denne koden. I grunnen løste vi denne oppgaven i tidligere leksjoner gjennom callbacks og abonnementer. La oss se hvordan vi gjør det med promises.

Først må du omslutte den asynkrone koden vår i et promise:

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

Dette er imidlertid ikke nok. Vi må eksplisitt angi at vår asynkrone kode er fullført. Her hjelper en spesiell fullføringsfunksjon, som automatisk kommer inn som den første parameteren til funksjonen hvis den er angitt:

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

Ved hjelp av fullføringsfunksjonen kan vi eksplisitt fortelle promise at den asynkrone koden er fullført. For å gjøre dette må vi kalle denne funksjonen på rett sted:

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

Samtidig, hvis vi ønsker å sende et resultat fra den asynkrone koden ut, kan vi sende det som en parameter til vår fullføringsfunksjon:

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å fjerne mellomvariabelen:

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

Nå kan vi kalle metoden then på vårt promise hvor som helst:

promise.then(function() {
	// vil utløses når promise er fullført
});

Resultatet av promise vil komme inn som den første parameteren til funksjonen hvis vi ønsker å angi den:

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

Lag et promise, inni hvilket det vil være en forsinkelse på 5 sekunder, deretter skal promise fullføres og returnere en tekst som sitt resultat. Skriv denne teksten til skjermen.