Вовед во промиси во JavaScript

Веќе знаете дека употребата на колбек-моделот на асинхроност лесно води до ситуација на callback hell. Затоа во JavaScript беше воведен нов модел наречен промиси (promise). Ајде да го проучиме овој модел.

Промис претставува објект, во кој како параметар се пренесува функција, внутри на која треба да го поставиме нашиот асинхрон код:

let promise = new Promise(function() {
	// асинхрон код
});

Како што гледате, го запишав објектот со промисот во променливата promise. На некое друго место во кодот можам да ја применам оваа променлива методот then, пренесувајќи во него функција со кодот што треба да се изврши по завршувањето на асинхрониот код, напишан при креирањето на овој промис:

promise.then(function() {
	// ќе се изврши при завршување на асинхрониот код
});

Звучи збунувачки, затоа ајде да погледнеме на пример. Нека имам ваков асинхрон код:

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

Нека сакам да ја решам за него нашата главна задача на асинхроност: да извршам одреден код по активирањето на тајмерот. При тоа не сакам да го поставувам овој код во самиот тајмер и сакам во овој код некако да стигне резултатот, напишан од мене во променливата result. Во принцип, ја решававме оваа задача во претходните лекции преку колбеци и претплати. Ајде сега да видиме како да го направиме тоа преку промиси.

За почеток треба да го обоиме нашиот асинхрон код во промис:

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

Ова, сепак, не е доволно. Ние мораме експлицитно да укажеме дека нашиот асинхрон код е завршен. Во ова ќе ни помогне специјална функција за завршување, која автоматски се наоѓа во првиот параметар на функцијата, ако е наведен:

let promise = new Promise(function(resolve) { // го означуваме параметарот
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

Со помош на функцијата за завршување можеме експлицитно да му укажеме на промисот дека асинхрониот код е завршен. За ова мораме да ја повикаме оваа функција на потребното место:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(); // го завршуваме промисот
	}, 3000);
});

Притоа, ако сакаме да пренесеме нанадвор некој резултат од асинхрониот код, можеме да го пренесеме како параметар на нашата функција за завршување:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(result); // го пренесуваме резултатот
	}, 3000);
});

Секако, може да се ослободиме од средната променлива:

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

Сега на кое било друго место можеме да го повикаме методот then на нашиот промис:

promise.then(function() {
	// ќе се активира по завршувањето на промисот
});

Резултатот од работата на промисот ќе стигне во првиот параметар на функцијата, ако сакаме да го наведеме:

promise.then(function(result) {
	console.log(result); // ќе го испечати низата со резултатот
});

Направете промис, внутри на кој ќе има одложување од 5 секунди, по што промисот треба да заврши, враќајќи каков било текст како свој резултат. Прикажете го овој текст на екранот.