JavaScript — Async/Await (Async/Await)

آخرین بروزرسانی: 1404/08/10

قبلی: پرامیس ها (Promises) بعدی: ماژول ها: استاتیک (Modules Static)

Async/Await (Async/Await)

«Async/Await» نوشتنِ کد غیرهمزمان را ساده می کند. «async» تابع را به «پرامیس (Promise)» تبدیل می کند. «await» هم منتظر نتیجه آن پرامیس می ماند. مثل سفارش آنلاین؛ صبر می کنی تا آماده شود.

سینتکس async

کلیدواژه async قبل از تابع، خروجیِ آن را پرامیس می کند.

async function myFunction() {
  return "Hello";
}

مشاهده در ادیتور

نکته: این معادل Promise.resolve("Hello") است، اما خواناتر است.

کار با then روی نتیجه async

چون خروجیِ تابع async پرامیس است، می توانی از then استفاده کنی.

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function (value) {
    myDisplayer(value);
  },
  function (error) {
    myDisplayer(error);
  }
);

مشاهده در ادیتور

سینتکس await

await فقط داخل تابعِ async مجاز است و منتظر پرامیس می ماند.

let value = await promise;

مشاهده در ادیتور

نمونه پایه با await

اینجا مقدارِ حل شده پرامیس، مستقیم در صفحه نمایش داده می شود.

async function myDisplay() {
  let myPromise = new Promise(function (resolve, reject) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

مشاهده در ادیتور

نکته: معمولاً فقط resolve کافی است؛ reject همیشه لازم نیست.

نمونه بدون reject

وقتی خطایی انتظار نداری، سازنده پرامیس را ساده تر بنویس.

async function myDisplay() {
  let myPromise = new Promise(function (resolve) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

مشاهده در ادیتور

منتظر ماندن برای تاخیر زمانی

با setTimeout یک کار زمان بر بساز و با await صبر کن.

async function myDisplay() {
  let myPromise = new Promise(function (resolve) {
    setTimeout(function () {
      resolve("I love You !!");
    }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

مشاهده در ادیتور

منتظر ماندن برای فایل

با XMLHttpRequest فایل بخوان و نتیجه را با await نمایش بده.

async function getFile() {
  let myPromise = new Promise(function (resolve) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function () {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        resolve("File not Found");
      }
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
getFile();

مشاهده در ادیتور