Bevezetés a JavaScript promise-ok használatába

Már tudjátok, hogy a callback-alapú aszinkronitási modell könnyen elvezet a callback hell helyzethez. Ezért a JavaScriptben bevezettek egy új modellt, melyet promise-nak (promise) hívnak. Tanulmányozzuk ezt a modellt.

A promise egy olyan objektum, melynek paraméterként átadunk egy függvényt, amelyben el kell helyeznünk az aszinkron kódunkat:

let promise = new Promise(function() {
	// aszinkron kód
});

Amint látjátok, a promise objektumot eltároltam a promise változóban. A kód egy másik részében meghívhatom ennél a változónál a then metódust, átadva neki egy olyan függvényt, amelyben az a kód szerepel, amelyet a promise létrehozásakor megadott aszinkron kód befejezésekor kell végrehajtani:

promise.then(function() {
	// végrehajtódik az aszinkron kód befejezésekor
});

Ez bonyolultnak hangozhat, ezért nézzünk egy példát. Tegyük fel, hogy van egy ilyen aszinkron kódom:

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

Tegyük fel, hogy meg akarom oldani számára az aszinkronitás alapvető feladatát: valamilyen kód végrehajtása az időzítő lejárta után. Ehhez nem akarom ezt a kódot magába az időzítőbe helyezni, és azt szeretném, hogy valahogy ebbe a kódba bekerüljön a result változóban tárolt eredmény. Lényegében ezt a feladatot már megoldottuk az előző leckékben callback-ekkel és feliratkozásokkal. Most nézzük meg, hogyan tehetjük meg ezt promise-okkal.

Először is, becsomagoljuk az aszinkron kódunkat egy promise-ba:

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

Ez azonban még nem elég. Explicit módon jeleznünk kell, hogy az aszinkron kódunk befejeződött. Ebben segít egy speciális befejező függvény, amely automatikusan az első paraméterként érkezik, ha meg van adva:

let promise = new Promise(function(resolve) { // megadjuk a paramétert
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

A befejező függvény segítségével explicit módon jelezhetjük a promise-nak, hogy az aszinkron kód befejeződött. Ehhez annak a függvénynek a megfelelő helyen kell meghívnunk:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(); // befejezzük a promise-ot
	}, 3000);
});

Ha valamilyen eredményt szeretnénk kívül átadni az aszinkron kódból, akkor azt átadhatjuk paraméterként a befejező függvényünknek:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(result); // átadjuk az eredményt
	}, 3000);
});

Természetesen meg is szabadulnunk a köztes változótól:

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

Most a kód bármely más részében meghívhatjuk a promise then metódusát:

promise.then(function() {
	// a promise befejezésekor aktiválódik
});

A promise eredménye az első paraméterként érkezik a függvénybe, ha meg akarjuk adni:

promise.then(function(result) {
	console.log(result); // kiírja a tömböt az eredménnyel
});

Készítsetek egy promise-ot, amelyben van egy 5 másodperces késleltetés, mely után a promise-nak be kell fejeződnie, és vissza kell adnia valamilyen szöveget eredményként. Jelenítsétek meg ezt a szöveget a képernyőn.