Промисы во синхронен стил во JavaScript
За решавање на проблемот со promise hell беше смислен специјален синтакса на промисы, кој овозможува пишување на асинхрон код многу полесно - во синхронен стил.
Да почнеме со негово изучување. За почеток земете го кодот од претходната лекција:
function func() {
getSmth(2).then(res => {
console.log(res); // ќе испечати 4
});
}
func();
Ако нашата функција getSmth беше
синхрона, тогаш кодот на функцијата func
би можеле да го преработиме на следниов начин:
function func() {
let res = getSmth(2);
console.log(res); // ќе испечати 4
}
Функцијата getSmth, сепак, е асинхрона,
затоа горенаведениот код нема да работи.
Но, користејќи го синхрониот стил на промисы,
ќе можеме да добиеме нешто слично. Ајде да го направиме тоа.
За почеток мораме да ја декларираме нашата функција
func како асинхрона со помош на специјалната
команда async:
async function func() {
}
После тоа ќе можеме внатре во функцијата func
да ја користиме специјалната команда await.
Оваа команда, напишана пред промис, ќе го принуди
JavaScript да чека се додека промисот
не се исполни. После што командата ќе го врати
резултатот од промисот, и извршувањето на кодот ќе продолжи.
Во нашиот случај, мораме да напишеме await
пред повикот на getSmth. Бидејќи резултатот
од повикувањето на оваа функција ќе биде промис, тогаш понатамошното
извршување на кодот ќе продолжи само после
извршувањето на овој промис. Па, а резултатот
од промисот може да се запише во променлива. Ајде да го направиме
описаното:
async function func() {
let res = await getSmth(2);
console.log(res); // ќе испечати 4
}
func();
Ајде да го повикаме getSmth неколку пати:
async function func() {
let res1 = await getSmth(2);
let res2 = await getSmth(3);
console.log(res1 + res2); // ќе испечати 13
}
func();
А сега ќе го повикуваме getSmth во циклус:
async function func() {
let arr = [1, 2, 3, 4, 5];
let sum = 0;
for (let elem of arr) {
sum += await getSmth(elem);
}
console.log(sum);
}
func();
Препишете го следниов код преку синхронен синтакса:
function func() {
getSmth(2).then(res1 => {
getSmth(3).then(res2 => {
getSmth(4).then(res3 => {
console.log(res1 + res2 + res3);
});
});
});
}
func();