Úvod do promises v JavaScripte

Už viete, že použitie callback modelu asynchrónnosti ľahko vedie k situácii callback hell. Preto bol v JavaScripte zavedený nový model s názvom promises (promise). Poďme sa tento model naučiť.

Promise predstavuje objekt, do ktorého sa ako parameter odovzdáva funkcia, vnútri ktorej potrebujeme umiestniť náš asynchrónny kód:

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

Ako vidíte, uložil som objekt s promise do premennej promise. Na inom mieste kódu môžem aplikovať na túto premennú metódu then, odovzdaním do nej funkcie s kódom, ktorý sa má vykonať po ukončení asynchrónneho kódu, napísaného pri vytvorení tohto promise:

promise.then(function() {
	// vykoná sa po dokončení asynchrónneho kódu
});

Znie to zmätočne, preto sa pozrime na príklad. Nech mám takýto asynchrónny kód:

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

Nech chcem vyriešiť preň našu hlavnú úlohu asynchrónnosti: vykonať nejaký kód po spustení časovača. Pritom nechcem umiestniť tento kód do samotného časovača a chcem, aby do tohto kódu nejako prišiel výsledok, napísaný mnou v premennej result. V podstate sme túto úlohu riešili v predchádzajúcich lekciách prostredníctvom callbackov a odberov. Poďme teraz pozrieť, ako to urobiť prostredníctvom promises.

Na začiatok potrebujeme obaliť náš asynchrónny kód do promise:

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

Toto však nie je dostatočné. Musíme v explicitnej forme uviesť, že náš asynchrónny kód sa skončil. V tom nám pomôže špeciálna funkcia dokončenia, automaticky sa dostávajúca do prvého parametra funkcie, ak je uvedený:

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

Pomocou funkcie dokončenia môžeme explicitne uviesť promise, že asynchrónny kód sa skončil. Na to musíme zavolať túto funkciu na potrebnom mieste:

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

Pritom, ak chceme odovzdať von nejaký výsledok asynchrónneho kódu, môžeme ho odovzdať ako parameter našej funkcie dokončenia:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(result); // odovzdávame výsledok
	}, 3000);
});

Samozrejme, je možné sa zbaviť prechodnej premennej:

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

Teraz na akomkoľvek inom mieste môžeme zavolať metódu then nášho promise:

promise.then(function() {
	// spustí sa po dokončení promise
});

Výsledok práce promise sa dostane do prvého parametra funkcie, ak ho budeme chcieť uviesť:

promise.then(function(result) {
	console.log(result); // vypíše pole s výsledkom
});

Vytvorte promise, vnútri ktorého bude oneskorenie 5 sekúnd, po ktorom sa promise má vykonať, svojím výsledkom vrátiť nejaký text. Vypíšte tento text na obrazovku.