პრომისები სინქრონულ სტილში 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();