პრომისები სინქრონულ სტილში JavaScript-ში

Promise hell-ის პრობლემის გადასაჭრელად შეიქმნა პრომისების სპეციალური სინტაქსი, რომელიც საშუალებას გვაძლევს დავწეროთ ასინქრონული კოდი ბევრად უფრო მარტივად - სინქრონულ სტილში.

მოდით შევისწავლოთ იგი. დასაწყისისთვის ავიღოთ კოდი წინა გაკვეთილიდან:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // გამოიტანს 4-ს
  });
}

func();

თუ ჩვენი ფუნქცია getSmth იქნებოდა სინქრონული, მაშინ ფუნქციის func კოდი შეგვეძლო გადაგვეწერა შემდეგნაირად:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // გამოიტანს 4-ს
}

ფუნქცია getSmth, თუმცა, ასინქრონულია, ამიტომ ზემოთ მოყვანილი კოდი არ იმუშავებს. მაგრამ, პრომისების სინქრონული სტილის გამოყენებით, ჩვენ შეგვიძლია მივიღოთ მსგავსი რამ. გავაკეთოთ ეს.

დასაწყისისთვის ჩვენ უნდა გამოვაცხადოთ ჩვენი ფუნქცია func ასინქრონულად სპეციალური ბრძანების async მეშვეობით:

javascriptasync function func() {
  
}

ამის შემდეგ ჩვენ ფუნქციის func შიგნით შევძლებთ გამოვიყენოთ სპეციალური ბრძანება await. ეს ბრძანება, რომელიც იწერება პრომისის წინ, აიძულებს JavaScript-ს დაელოდოს მანამ, სანამ პრომისი არ შესრულდება. ამის შემდეგ ბრძანება დააბრუნებს პრომისის შედეგს და კოდის შესრულება გაგრძელდება.

ჩვენს შემთხვევაში უნდა დავწეროთ await getSmth-ის გამოძახებამდე. ვინაიდან ამ ფუნქციის გამოძახების შედეგი იქნება პრომისი, მაშინ კოდის შემდგომი შესრულება გაგრძელდება მხოლოდ ამ პრომისის შესრულების შემდეგ. ხოლო პრომისის შედეგი შეგვიძლია ჩავწეროთ ცვლადში. გავაკეთოთ აღწერილი:

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // გამოიტანს 4-ს
}

func();

მოდით გამოვიძახოთ getSmth რამდენჯერმე:

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // გამოიტანს 13-ს
}

func();

ახლა კი გამოვიძახოთ getSmth ციკლში:

javascriptasync 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();

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      getSmth(4).then(res3 => {
        console.log(res1 + res2 + res3);
      });
    });
  });
}

func();