Async در جاوا اسکریپت چیست و چگونه از آن استفاده کنیم؟‌

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

Async در جاوا اسکریپت چیست؟

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

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

async function fetchData() {

  // انجام عملیات ناهمگام

  const data = await fetch('https://example.com/data');

  return data;

}

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

async function main() {

  // انجام عملیات ناهمگام

  const data = await fetchData();

  // ادامه اجرای کد پس از تکمیل عملیات ناهمگام

  console.log(data);

}

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

ماهیت برنامه‌نویسی async در جاوا اسکریپت

ماهیت برنامه نویسی async در جاوا اسکریپت مبتنی بر یکسری چارچوب‌های مشخص است. اولین مورد استفاده از توابع Async است. با استفاده از کلیدواژه "async" قبل از تعریف یک تابع، آن تابع به صورت غیر همگام (async) تعریف می‌شود. تابع می‌تواند شامل عملیات‌های غیر همگام باشد و ممکن است زمان طولانی‌تری برای اجرا نیاز داشته باشد. مرحله بعدی نوبت به استفاده از Promise می‌رسد. توابع Async معمولا یک شیء Promise را برمی‌گردانند. این Promise نشان می‌دهد که عملیات Async در حال اجرا هستند و مقدار نهایی آن در آینده موجود خواهد بود. می‌توان از توابع مربوط به Promise مانند then و catch برای کنترل جریان و بررسی خطاها استفاده کرد. مرحله بعد نوبت به استفاده از Await می‌رسد. با استفاده از کلیدواژه "await" در تابع Async می‌توانید منتظر اتمام عملیات غیر همگام (مانند یک Promise) باشید. این کلیدواژه باعث توقف اجرای بلاک فعلی می‌شود تا مقدار Promise قابل دسترسی شود. این ویژگی به شما امکان می‌دهد از جریان همزمان و بدون بلوک کردن استفاده کنید.

با استفاده از ترکیب توابع Async، Promise و Await، شما می‌توانید برنامه‌هایی را بنویسید که عملیات غیر همگام را به صورت ساده و خوانا مدیریت کنند، اجرای برنامه را بدون متوقف کردن جریان برنامه کنترل کنند و خطاها را به صورت موثر کنترل کنند.

چرا نیازمند کدنویسی async در جاوا اسکریپت هستیم؟

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

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

این تکنیک به شما اجازه می‌دهد تا کد خوانا و با قابلیت نگهداری‌ بالا را بنویسید. با استفاده از برنامه نویسی async و استفاده از کلیدواژه await، کد شما به صورت خط به خط و به صورت سنکرون خوانده می‌شود. این امر باعث می‌شود کد شما قابل خوانایی بالایی پیدا کند، زیرا جریان اجرای کد به صورت طبیعی و خط به خط است و نیازی به تعامل با توالی‌های پیچیده ندارد.

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

تکنیک های برنامه نویسی جاوا اسکریپت  غیر همزمان

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

توابع بازگشتی: از محبوبترین روش‌ها برای برنامه نویسی غیر همزمان در جاوا اسکریپت استفاده از Callbackها هستند. در این روش، تابع بازگشتی به عنوان پارامتری به یک تابع دیگر پاس داده می‌شود و در زمانی که عملیات ناهمزمان تمام شود، تابع بازگشتی فراخوانی می‌شود. این روش بدون استفاده از کلیدواژه async/await قابل استفاده است و می‌تواند باعث اجرای کدها به شکل غیر مسدود شود.

function fetchData(callback) {

  // عملیات ناهمزمان

  setTimeout(() => {

    const data = 'نتیجه';

    callback(data);

  }, 2000);

}

function displayData(data) {

  console.log(data);

}

fetchData(displayData);

2. Promises: از Promises برای مدیریت عملیات‌های غیر همزمان استفاده می‌شود. Promises یک الگوی طراحی است که اجازه می‌دهد تا بازگشتی از یک عملیات ناهمزمان را به صورت آسنکرون دریافت کنید. با استفاده از کلیدواژه‌های resolve و reject، می‌توانید وعده‌ها را به صورت موفقیت آمیز یا شکست خاتمه دهید. در ادامه، می‌توانید با استفاده از کلیدواژه async/await بازگشتی از یک Promise را دریافت کنید.

function fetchData() {

  return new Promise((resolve, reject) => {

    // عملیات ناهمزمان

    setTimeout(() => {

      const data = 'نتیجه';

      resolve(data);

    }, 2000);

  });

}

async function displayData() {

  try {

    const data = await fetchData();

    console.log(data);

  } catch (error) {

    console.error(error);

  }

}

displayData();

3. Async/await: کلیدواژه‌های async و await به شما این امکان را می‌دهند تا توابعی را به صورت غیر همزمان تعریف کنید و در صورت نیاز صبر کنید تا یک Promise اجرا شود. با استفاده از async در تعریف تابع و await در فراخوانی تابع غیر همزمان، برنامه به صورت خط به خط و همروند اجرا می‌شود.

function fetchData() {

  return new Promise((resolve, reject) => {

    // عملیات ناهمزمان

    setTimeout(() => {

      const data = 'نتیجه';

      resolve(data);

    }, 2000);

  });

}

async function displayData() {

  try {

    const data = await fetchData();

    console.log(data);

  } catch (error) {

    console.error(error);

  }

}

displayData();

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

تبدیل callback به promise در جاوا اسکریپت

هنگام انتقال از callback به یک promise در جاوااسکریپت، می‌توانید از قابلیت‌های جدید ES6 مانند Promise استفاده کنید. در ادامه نحوه تبدیل فوق را مورد بررسی قرار می‌دهیم.

function asyncOperation(callback) {

  // اجرای عملیات ناهمزمان

  setTimeout(() => {

    const result = 'نتیجه عملیات';

    callback(null, result);

  }, 2000);

}

function convertedAsyncOperation() {

  return new Promise((resolve, reject) => {

    asyncOperation((error, result) => {

      if (error) {

        reject(error);

      } else {

        resolve(result);

      }

    });

  });

}

// استفاده از وعده

convertedAsyncOperation()

  .then(result => {

    console.log(result);

  })

  .catch(error => {

    console.error(error);

  });

در این مثال، تابع asyncOperation یک تابعی است که یک callback را می‌پذیرد و عملیات ناهمزمان را اجرا می‌کند. سپس با استفاده از new Promise و تابع resolve و reject، یک Promise را ایجاد می‌کنیم و درون آن تابع asyncOperation را فراخوانی می‌کنیم. در callback اگر خطا وجود داشته باشد، Promise را با استفاده از reject خاتمه می‌دهیم و در غیر این صورت با resolve نتیجه را برگردانده و Promise را خاتمه می‌دهیم. در نهایت، می‌توانید با استفاده از then و catch بر روی Promise اعمالی را انجام دهید و نتیجه یا خطا را دریافت کنید.

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

رسیدگی به خطا در جاوا اسکریپت ناهمزمان

در جاوا اسکریپت ناهمزمان، برای رسیدگی به خطاها در عملیات‌های ناهمزمان، می‌توانید از مکانیزم‌هایی مانند try/catch و error callbacks استفاده کنید. در ادامه، نحوه رسیدگی به خطاها در جاوا اسکریپت غیر همزمان را بررسی خواهیم کرد:

استفاده از try/catch: شما می‌توانید کد غیر همزمان خود را درون یک بلاک try قرار دهید و خطاها را با استفاده از بلاک catch مدیریت کنید. با این روش، می‌توانید خطاها را مرتبط با عملیات غیر همزمان در یک بلاک مشخص مدیریت کنید.

function asyncOperation(callback) {

  setTimeout(() => {

    try {

      const result = someFunction(); // تابعی که ممکن است خطا ایجاد کند

      callback(null, result);

    } catch (error) {

      callback(error, null);

    }

  }, 2000);

}

asyncOperation((error, result) => {

  if (error) {

    console.error(error);

  } else {

    console.log(result);

  }

});

در این مثال، کد غیر همزمان درون یک بلاک try قرار دارد و در صورتی که خطایی رخ دهد، با استفاده از بلاک catch خطا را دریافت و مدیریت می‌کنیم.

2. error callback: یک روش دیگر برای رسیدگی به خطاها در جاوا اسکریپت غیر همزمان استفاده از error callback است. در این روش، به جای استفاده از try/catch، خطاها را به عنوان پارامتری در تابع بازگشی مدیریت می‌کنید.

function asyncOperation(callback, errorCallback) {

  setTimeout(() => {

    try {

      const result = someFunction(); // تابعی که ممکن است خطا ایجاد کند

      callback(result);

    } catch (error) {

      errorCallback(error);

    }

  }, 2000);

}

asyncOperation(

  (result) => {

    console.log(result);

  },

  (error) => {

    console.error(error);

  }

);

در این مثال، به جای استفاده از بلاک try/catch، خطاها را با فراخوانی error callback برگردانده و مدیریت می‌کنیم. هر دو روش بالا (try/catch و کالبک خطا) به شما امکان می‌دهند با خطاها در عملیات‌های غیر همزمان مقابله کنید. انتخاب بین این دو روش بستگی به نیازها و سبک برنامه نویسی شما دارد.