Uvod u promisi u JavaScript-u

Već znate da upotreba kolbek (callback) modela asinhronosti lako dovodi do situacje callback hell. Zato je u JavaScript uveden novi model pod nazivom promisi (promise). Hajde da proučimo ovaj model.

Promis predstavlja objekat, u koji se kao parametar prosleđuje funkcija, unutar koje treba da smestimo naš asinhroni kod:

let promise = new Promise(function() {
	// asinhroni kod
});

Kao što vidite, zapisao sam objekat sa promisom u promenljivu promise. Na nekom drugom mestu koda mogu primeniti na ovu promenljivu metodu then, prosledivši u nju funkciju sa kodom, koji treba da se izvrši po završetku asinhronog koda, napisanog pri kreiranju ovog promisa:

promise.then(function() {
	// izvršiće se po završetku asinhronog koda
});

Zvuči zbunjujuće, pa hajde da pogledamo na primeru. Neka ja imam ovakav asinhroni kod:

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

Neka želim da rešim za njega naš osnovni zadatak asinhronosti: izvršiti neki kod nakon okidanja tajmera. Pritom ne želim da smestim taj kod u sam tajmer i želim da u taj kod nekako dospi rezultat, koji sam napisao u promenljivoj result. U suštini, rešavali smo ovaj zadatak u prethodnim lekcijama preko kolbeka i pretplata. Hajde sada da vidimo kako to uraditi preko promisa.

Za početak treba da obmotamo naš asinhroni kod u promis:

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

Ovo, međutim, nije dovoljno. Moramo eksplicitno da naznačimo, da se naš asinhroni kod završio. U tome će nam pomoći specijalna funkcija završetka, koja automatski dospijeva u prvi parametar funkcije, ako je naveden:

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

Pomoću funkcije završetka možemo eksplicitno da naznačimo promisu, da se asinhroni kod završio. Za to moramo pozvati ovu funkciju na nama potrebnom mestu:

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

Pritom, ako želimo da prosledimo napolje neki rezultat asinhronog koda, možemo ga proslediti kao parametar naše funkcije završetka:

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

Može se, naravno, osloboditi i od međupromenljive:

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

Sada na bilo kom drugom mestu možemo pozvati metodu then našeg promisa:

promise.then(function() {
	// okidaće se po završetku promisa
});

Rezultat rada promisa će dospeti u prvi parametar funkcije, ako poželimo da ga navedemo:

promise.then(function(result) {
	console.log(result); // ispisaće niz sa rezultatom
});

Napravite promis, unutar kojeg će biti kašnjenje od 5 sekundi, nakon čega promis treba da se izvrši, svojim rezultatom vraćajući neki tekst. Ispišite ovaj tekst na ekran.