برنامه نویسی

جاوا اسکریپت غیرهمزمان (Async/Await) چگونه کار می‌کند

جاوا اسکریپت غیرهمزمان (Async/Await) چگونه کار می‌کند

6 دقیقه زمان برای خواندن این مطلب نیاز است.

فهرست مطالب


جاوا اسکریپت به عنوان یکی از زبان‌های برنامه‌نویسی پرطرفدار و اصلی در توسعه وب، از همان ابتدا با ویژگی‌های دستکاری همزمان داده‌ها روبه‌رو بوده است. سرعت، کارایی و تجربه کاربری بهتر از دلایل مهم استفاده از برنامه‌نویسی غیرهمزمان است. یکی از بهترین متدهای مدیریت این نوع برنامه‌نویسی در جاوا اسکریپت، الگوی Async/Await است.

در این مقاله تخصصی و کامل از دانا پدیا با عنوان جاوا اسکریپت غیرهمزمان (Async/Await) چگونه کار می‌کند قصد داریم به صورت دقیق، ساده و عمیق به این موضوع بپردازیم و شما را با نحوه عملکرد، کاربردها، مزایا و نکات پیاده‌سازی این مفهوم حیاتی آشنا کنیم.

REST API چیست و چگونه کار می‌کند

جاوا اسکریپت غیرهمزمان (Async/Await) چگونه کار می‌کند

بخش اول: مقدمه‌ای بر برنامه‌نویسی همزمان و غیرهمزمان در جاوا اسکریپت

چیستی برنامه‌نویسی همزمان (Synchronous)

در حالت همزمان، کدهای جاوا اسکریپت خط به خط اجرا می‌شوند و خط بعد تا پایان اجرای خط فعلی منتظر می‌ماند.
مثال:

console.log("شروع");
console.log("میان");
console.log("پایان");

در اینجا همه دستورها به ترتیب اجرا و خروجی همان ترتیب چاپ می‌شود.

محدودیت‌های برنامه‌نویسی همزمان

اگر بخواهیم یک عملیات زمان‌بر مانند خواندن داده از سرور یا فایل را در حالت همزمان انجام دهیم، برنامه قفل می‌شود و تا پایان عملیات بعدی منتظر می‌ماند که این باعث کاهش کارایی و تجربه بد برای کاربر می‌شود.

برنامه‌نویسی غیرهمزمان (Asynchronous) چیست؟

در برنامه‌نویسی غیرهمزمان، کدهایی وجود دارند که در پس‌زمینه اجرا می‌شوند و برنامه به اجرای سایر قسمت‌ها ادامه می‌دهد بدون اینکه منتظر اتمام آنها باشد. این باعث می‌شود تا پاسخ‌گویی برنامه بالاتر رفته و UI قفل نشود.

جاوا اسکریپت ذاتاً تک‌نخی است، ولی با مکانیزم‌هایی مانند Callbacks، Promises و Async/Await می‌تواند غیرهمزمان عمل کند.

DevOps چیست و چه وظایفی دارد


بخش دوم: پیش‌نیاز مهم – Promise در جاوا اسکریپت

قبل از توضیح چگونگی کارکرد Async/Await، باید مفهوم Promise را به خوبی درک کنیم.

Promise چیست؟

Promise یک شیء در جاوا اسکریپت است که نمایانگر انجام یا شکست یک عملیات غیرهمزمان است و به شما اجازه می‌دهد کنترل دقیق‌تری نسبت به callback ها داشته باشید.

یک Promise ممکن است در 3 حالت باشد:

  • Pending (در حال انتظار)
  • Fulfilled (موفقیت‌آمیز)
  • Rejected (رد شده یا با خطا مواجه شده)

ساختار Promise

const myPromise = new Promise((resolve, reject) => {
  // عملیات غیرهمزمان
  if (عملیات_موفقیت) {
    resolve("نتیجه موفقیت");
  } else {
    reject("خطا در عملیات");
  }
});

استفاده از then و catch

برای دریافت نتیجه Promise از متدهای then برای موفقیت و catch برای خطا استفاده می‌شود.

برنامه نویسی فرانت اند چیست


بخش سوم: Async/Await چیست و چرا به وجود آمد؟

مشکلات Callback و Promise

وقتی تعداد زیادی عملیات غیرهمزمان پشت سر هم نیاز باشد، استفاده از callback ها منجر به callback hell می‌شود. Promises این مشکل را کم کردند ولی باز هم خوانایی کدها کاهش می‌یابد.

Async/Await به عنوان یک سینتکس ساده‌تر

Async/Await در ES2017 (ES8) معرفی شد تا با استفاده از آن کدهای غیرهمزمان شبیه به کدهای همزمان نوشته شوند ولی در واقع غیرهمزمان اجرا شوند.

  • کلمه کلیدی async قبل از یک تابع تعریف می‌شود و آن را به یک تابع غیرهمزمان تبدیل می‌کند.
  • کلمه کلیدی await داخل توابع async به کار می‌رود و باعث می‌شود جاوا اسکریپت منتظر کامل شدن Promise بماند و سپس ادامه کد را اجرا کند.

برنامه نویسی بک اند چیست


بخش چهارم: نحوه استفاده از Async/Await در جاوا اسکریپت

تعریف یک تابع async

async function getData() {
  return "داده";
}

استفاده از await برای منتظر ماندن نتیجه یک Promise

async function fetchData() {
  const response = await fetch('https://example.com/data');
  const data = await response.json();
  return data;
}

در اینجا، await باعث توقف موقت اجرای تابع fetchData می‌شود تا زمانی که fetch کامل شده و داده‌ها آماده شوند.

مثال ساده کامل

async function learnAsyncAwait() {
  try {
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve("سلام از Async/Await!"), 2000);
    });
    const result = await promise;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

learnAsyncAwait();

فول استک دولوپر کیست و چه مهارت‌هایی نیاز دارد


بخش پنجم: مزایای استفاده از Async/Await نسبت به روش‌های قبلی

  • کدهایی خواناتر، ساده و نزدیک به حالت سینکرون نوشته می‌شوند.
  • رفع مشکلات پیچیده callback های تو در تو و ساختارهای شلوغ Promise chaining.
  • امکان استفاده آسان از try/catch برای مدیریت خطاها بدون نیاز به then/catch مجزا.
  • سازگاری بهتر با ابزارهای دیباگ و خطایابی.

آموزش کامل HTML و CSS


بخش ششم: اصول و نکات کلیدی در پیاده‌سازی Async/Await

حتماً داخل توابع async از await استفاده کنید

کدی که خارج از تابع async باشد نمی‌تواند از await استفاده کند.

تابع async همیشه یک Promise برمی‌گرداند

حتی اگر شما مقدار ساده‌ای را return کنید، در واقع Promise.resolve با آن مقدار را می‌سازد.

برخورد با خطا با try/catch

async function getUser() {
  try {
    const response = await fetch('https://example.com/user');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("خطا:", error);
  }
}

اجرای چند Promise به صورت هم‌زمان با Promise.all

اگر چند عملیات غیرهمزمان دارید که می‌خواهید همزمان اجرا شوند:

async function getAllData() {
  const [data1, data2] = await Promise.all([fetch(url1), fetch(url2)]);
  console.log(data1, data2);
}

جاوا بهتر است یا کاتلین برای اندروید


بخش هفتم: کاربردهای رایج Async/Await در دنیای واقعی

  • فراخوانی API و دریافت داده‌های سرور
  • خواندن فایل‌ها و عملیات I/O
  • مدیریت چند درخواست همزمان در سایت‌های بزرگ
  • اجرای زمان‌بندی‌های مرتب و متوالی

کتابخانه React چیست و تفاوت آن با فریمورک


بخش هشتم: اشتباهات رایج و نحوه جلوگیری از آنها

  • استفاده از await در خارج از تابع async
  • فراموش کردن مدیریت خطا با try/catch
  • انتظار برای Promise هایی که برنگردانده شده‌اند
  • اجرای تسک‌هایی پشت سر هم به جای اجرای هم‌زمان با Promise.all

بهترین پکیج های پایتون برای علم داده


بخش نهم: نکات تکمیلی درباره Async/Await و آینده آن

Async/Await با پیشرفت جاوا اسکریپت، تبدیل به استاندارد متداول شده و اکثر فریمورک‌ها و ابزارهای مدرن از آن پشتیبانی می‌کنند. یادگیری عمیق و دانش به‌روز در این بخش، کلید موفقیت توسعه‌دهندگان جاوا اسکریپت حرفه‌ای است.

آموزش ماشین لرنینگ با پایتون


سوالات متداول (FAQ)

۱. آیا Async/Await همان Promise است؟
Async/Await یک ابزار ساده‌تر و سینتکسی برای کار با Promise است، نه جایگزینی.

۲. آیا می‌توان از Async/Await خارج از توابع async استفاده کرد؟
خیر، await فقط در داخل توابع async مجاز است.

۳. آیا Async/Await باعث کندی برنامه می‌شود؟
خیر، Async/Await مدیریت بهتری روی اجرای غیرهمزمان دارد و باعث بهبود خوانایی کد می‌شود.

۴. چگونه خطاهای Async/Await را مدیریت کنیم؟
با استفاده از بلوک try/catch داخل تابع async.

۵. چگونه چند عملیات Async/Await را هم‌زمان اجرا کنیم؟
با استفاده از Promise.all برای اجرای موازی.

جاوا اسکریپت غیرهمزمان (Async/Await) چگونه کار می‌کند

سخن پایانی از دانا پدیا

آموختن نحوه کارکرد جاوا اسکریپت غیرهمزمان (Async/Await) نقطه عطفی در حرفه کدنویسی هر برنامه‌نویس وب است. دانا پدیا مفتخر است که با ارائه محتوای کامل و به‌روزرسانی شده در این حوزه گام مهمی برای ارتقای دانش شما بردارد.

اگر قصد دارید علاوه بر این مقاله، نمونه‌کدهای آماده، پروژه‌های تمرینی و دوره‌های آموزشی برنامه‌نویسی جاوا اسکریپت را دریافت کنید، دانا پدیا همیشه آماده یاری است.


دیدگاهتان را بنویسید