Async/await

Va’dalar bilan ishlash uchun async/await deb nomlangan maxsus sintaksis mavjud. Buni tushunish va ishlatish hayratlanarli darajada oson.

Async funktsiyalari

Async kalit so’zidan boshlaymiz. Uni quyidagi funktsiyadan oldin qo’yish mumkin:

async function f() {
  return 1;
}

“Async” so’zi funktsiyadan oldin bitta oddiy narsani anglatadi: funktsiya har doim va’da qaytaradi. Agar funktsiya haqiqatan ham va’da bermaydigan qiymatni qaytarsa ham, funktsiya ta’rifini “async” kalit so’zi bilan oldindan belgilash JavaScript-ni ushbu qiymatni hal qilingan va’da bilan avtomatik ravishda o’rashga yo’naltiradi.

Masalan, yuqoridagi kod 1 natijasi bilan yechilgan va’dani qaytaradi, keling uni sinab ko’raylik:

async function f() {
  return 1;
}

f().then(alert); // 1

Biz aniq bir va’dani qaytara olamiz, xuddi shunday bo’lishi mumkin:

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

Shunday qilib, async funktsiya va’dani qaytarishini ta’minlaydi va undagi va’dalarni yopadi. Yetarlicha sodda, to’g’rimi? Ammo bu nafaqat. Faqat async funktsiyalarida ishlaydigan yana bir await kalit so’zi bor va bu juda ajoyib.

Await

Sintaksis:

// faqat async funktsiyalar ichida ishlaydi
let value = await promise;

await kalit so’zi JavaScript-ni ushbu va’da amalga oshguncha kutib turishiga va natijasini qaytarishiga olib keladi.

1 sekund ichida hal qilinadigan va’da bilan misol:

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // va'da hal bo'lguncha kuting (*)

  alert(result); // "done!"
}

f();

Funktsiyaning bajarilishi (*)satrrida “to’xtaydi” va va’da bajarilgandan so’ng davom etadi, natijada result uning natijasiga aylanadi. Shunday qilib, yuqoridagi kod “done!” ko’rsatadi bir soniyada.

Keling, ta’kidlab o’tamiz: await so’zma-so’z JavaScript-ni va’da tugaguncha kutib turishi va natija bilan davom etishi kerak. Bu hech qanday CPU resurslarini talab qilmaydi, chunki interpretator boshqa ishlarni bajarishi mumkin: boshqa skriptlarni bajarish, hodisalarni boshqarish va hk.

Bu va’da natijasini olish uchun va’daga ko’ra oqlangan sintaksis promise.then , o’qish va yozish osonroq.

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

Va'dalar zanjiri bobidagi showAvatar() misolini olamiz va uni async/await yordamida qayta yozamiz:

1. Biz .then chaqiruvlarini await bilan almashtirishimiz kerak.
2. Shuningdek, ular ishlashi uchun async funktsiyani bajarishimiz kerak.

async function showAvatar() {

  // bizning JSON-ni o'qish
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

  // github foydalanuvchisini o'qish
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();

  // avatarni ko'rsatish
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);

  // 3 soniya kuting
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;
}

showAvatar();

Juda toza va o’qish oson, to’g’rimi? Oldingiga qaraganda ancha yaxshi.

// yuqori darajadagi kodda sintaksis xatosi
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

(async () => {
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  ...
})();

class Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    alert(resolve);
    // 1000ms dan keyin this.num*2 bilan hal qilish
    setTimeout(() => resolve(this.num * 2), 1000); // (*)
  }
}

async function f() {
  // 1 soniyani kutadi, keyin natija 2 ga teng bo'ladi
  let result = await new Thenable(1);
  alert(result);
}

f();

class Waiter {
  async wait() {
    return await Promise.resolve(1);
  }
}

new Waiter()
  .wait()
  .then(alert); // 1 (this is the same as (result => alert(result)))

Xato ishlov beruvchi

Agar va’da odatdagidek hal qilinsa, await promise natijani qaytaradi. Ammo rad etilgan taqdirda, u xuddi shu satrda throw iborasi bo’lganidek, xatoga yo’l qo’yadi.

Ushbu kod:

async function f() {
  await Promise.reject(new Error("Whoops!"));
}

Bu xuddi shunday:

async function f() {
  throw new Error("Whoops!");
}

Haqiqiy vaziyatlarda va’da rad etilishidan oldin biroz vaqt talab qilishi mumkin. Shunday qilib, await kutadi va keyin xato bo’ladi.

Ushbu xatoni odatiy throw singari try..catch yordamida topishimiz mumkin:

async function f() {

  try {
    let response = await fetch('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

Xato bo’lsa, boshqaruv catch blokiga o’tadi. Shuningdek, biz bir nechta satrlarni o’rashimiz mumkin:

async function f() {

  try {
    let response = await fetch('/no-user-here');
    let user = await response.json();
  } catch(err) {
    // fetch va response.json-da xatolarga yo'l qo'yadi
    alert(err);
  }
}

f();

Agar bizda try..catch bo’lmasa, u holda f() async funktsiya chaqiruvi natijasida hosil bo’lgan va’da rad etiladi. Buni boshqarish uchun .catch qo’shib qo’yishimiz mumkin:

async function f() {
  let response = await fetch('http://no-such-url');
}

// f() rad qilingan va'daga aylanadi
f().catch(alert); // TypeError: failed to fetch // (*)

Agar u yerga .catch qo’shishni unutib qo’ysak, unda ishlov berilmagan va’da xatosi paydo bo’ladi (konsolda ko’rish mumkin). Biz Va'dalar bilan ishlashda xato bobida tasvirlangan hodisalarni global ishlov beruvchisi yordamida bunday xatolarga yo’l qo’yamiz.

// natijalar massivini kutish
let results = await Promise.all([
  fetch(url1),
  fetch(url2),
  ...
]);

Mikrovazifa navbat

Mikrovazifalar va hodisalar tsikli bobida ko’rganimizdek, va’da beruvchilar asinxron tarzda bajariladi. Har bir .then/catch/finally ishlov beruvchisi avval “mikrovazifa navbatiga” kiradi va joriy kod tugagandan so’ng bajariladi.

Async/await va’dalarga asoslanadi, shuning uchun u bir xil mikrovazifalarda navbatni ichki sifatida ishlatadi va makrovazifalarga nisbatan bir xil ustuvorlikka ega.

Masalan, bizda:

• setTimeout(handler, 0), nol kechikish bilan handler ni ishga tushirishi kerak.
• let x = await f(), function f() bu async, lekin darhol qaytadi.

Kodda await ning ostida setTimeout bo’lsa, qaysi biri birinchi ishlaydi?

async function f() {
  return 1;
}

(async () => {
    setTimeout(() => alert('timeout'), 0);

    await f();

    alert('await');
})();

Bu yerda noaniqlik yo’q: await har doim birinchi bo’lib tugaydi, chunki (mikrovazifa) u setTimeout ishlov berishdan yuqori ustuvorlikka ega.

Xulosa

Funktsiyadan oldin async kalit so’zi ikkita ta’sirga ega:

1. Har doim va’dasini qaytaradi.
2. Unda await dan foydalanishga ruxsat beradi.

Va’da oldidan await kalit so’zi JavaScript-ni ushbu va’da bajarilishini kutib turishiga majbur qiladi va keyin:

1. Agar bu xato bo’lsa, istisno yaratiladi, xuddi o’sha joyda throw error chaqirilgandek.
2. Aks holda, natijani qaytaradi, shuning uchun biz uni qiymatga belgilashimiz mumkin.

Ular birgalikda asinxron kod yozish uchun ajoyib asos yaratadilar, bu ham o’qilishi, ham yozilishi oson.

Async/await bilan biz kamdan-kam hollarda promise.then/catch deb yozishimiz kerak, ammo biz hali ham ularning va’dalarga asoslanganligini unutmasligimiz kerak, chunki ba’zida (masalan, tashqi tomondan) biz ushbu usullardan foydalanishimiz kerak. Shuningdek, Promise.all bir vaqtning o’zida ko’plab vazifalarni kutish uchun foydali narsa.