توابع Async اساسا یک روش برای کارکردن با کدهای غیرهمزمان در جاوا اسکریپت است.برای درک این که این توابع واقعا چه هستند و چگونه کار میکنند ابتدا باید Promise ها را به خوبی درک کنیم.اگر نمیدونید Promise ها چی هستند پیشنهاد میکنم مقاله اشنایی با Promise در جاوااسکریپت را مطالعه کنید.تا زمانی که Promise رو درک نکنید نمی تونید مفهوم Async/Await رو درک کنید.

Async/Await چیست؟

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

Syntax

نوشتن توابع async بسیار ساده است . کافیه که شما کلمه کلیدی async رو قبل از function اضافه کنید

// Normal Function

function add(x,y){
  return x + y;
}

// Async Function

async function add(x,y){
  return x + y;
}

// Normal Function

function add(x,y){

return x + y;

}

// Async Function

async function add(x,y){

return x + y;

}

Await

توابع Async میتوانند از کلیدواژه Await استفاده کنند.این کار توابع Async را متوقف میکند و منتظر اجرای دستور بازگشتی می ماند.

برای درک همه این ها اجازه بدهید که کار را با یک مثال ادامه بدهیم. ابتدا قصد داریم یک کد را با استفاده از Promise ها ایجاد کنیم سپس این کدها را با استفاده از async بازنویسی کنیم تا ببینیم که چقدر کارمان ساده تر شده است.

کد زیر را درنظر بگیرید:

function doubleAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x * 2);
    }, 2000);
  });
}

function doubleAfter2Seconds(x) {

return new Promise(resolve => {

setTimeout(() => {

resolve(x * 2);

}, 2000);

});

}

در این کد ما یک تابع به نام doubleAfter2Seconds تعریف کردیم. این تابع یک عدد را به عنوان ورودی میگیرد و بعد از ۲ ثانیه مقدار آن را دوبرابر میکند.ما میتونیم تابع رو فراخوانی کنیم و این تابع رو با مقدار ۱۰ تست کنیم.سپس بعد از اینکه Promise به طور کامل resolve شد،ما مقدار برگشتی را در کنسول log میکنیم. به قطعه کد زیر توجه کنید

doubleAfter2Seconds(10).then((r) => {
  console.log(r);
});

doubleAfter2Seconds(10).then((r) => {

console.log(r);

});

اما اگه ما بخوایم تابع رو چندین مرتبه با مقادیر مختلف فراخوانی کنیم و مقدار برگشتی رو به نتیجه اضاف کنیم چه اتفاقی رخ می دهد؟متاسفانه ما نمیتوانیم مقادیر برگشتی رو به یکدیگر اضاف کنیم.

let sum =   doubleAfter2Seconds(10)
          + doubleAfter2Seconds(20)
          + doubleAfter2Seconds(30);
console.log(sum);

// undefined

let sum = doubleAfter2Seconds(10)

+ doubleAfter2Seconds(20)

+ doubleAfter2Seconds(30);

console.log(sum);

// undefined

مشکل کد بالا این است که در واقع قبل از resolve شدن کامل promise خروجی در کنسول log شده است.یک راه حل ممکن راه اندازی یک promise زنجیره ای است.برای این کار ما یک تابع جدید به نام addPromise ایجاد میکنیم.این تابع یک مقدار را به عنوان ورودی میگیرد و یک promise را بر میگرداند.

function addPromise(x){
  return new Promise(resolve => {

    // Code goes here...   
    // resolve()

  });
}

function addPromise(x){

return new Promise(resolve => {

// Code goes here...

// resolve()

});

}

حالا ما میتوانیم مقادیر برگشتی رو به نتیجه فراخوانی اضاف کنیم.در این مثال ما باید x + 2*a + 2*b + 2*c رو برگردونیم.

function addPromise(x){
  return new Promise(resolve => {
    doubleAfter2Seconds(10).then((a) => {
      doubleAfter2Seconds(20).then((b) => {
        doubleAfter2Seconds(30).then((c) => {
          resolve(x + a + b + c);
        })
      })
    })
  });
}

function addPromise(x){

return new Promise(resolve => {

doubleAfter2Seconds(10).then((a) => {

doubleAfter2Seconds(20).then((b) => {

doubleAfter2Seconds(30).then((c) => {

resolve(x + a + b + c);

})

});

}

حالا خط به خط کدهای بالا رو بررسی میکنیم.

ابتدا ما تابع addPromise رو ایجاد کردیم.این تابع یک ورودی میگیرد.
سپس ما یک Promise ایجاد کردیم.توجه کنید که ما برای سادگی ما خطاها رو مدیریت نمی کنیم.
سپس ما doubleAfter2Seconds رو برای اولین بار فراخوانی کردیم و مقدار ۱۰ رو به عنوان ورودی بهش پاس دادیم.بعد از ۲ ثانیه مقدار ۲۰ درون متغیر a برگردانده میشود.
سپس دوباره doubleAfter2Seconds رو با مقدار ۲۰ فراخوانی کردیم و بعد از ۲ ثانیه مقدار ۴۰ درون متغیرb برگردانده میشود.
برای آخرین بار doubleAfter2Seconds رو با مقدار ۳۰ فراخوانی میکنیم و بعد از ۳ ثانیه مقدار ۶۰ درون متغیر c برگردانده میشود.
در نهایت Promise ما با مقدار ۱۰+۲۰+۴۰+۶۰یا۱۳۰ resolve میشود.

زمانی که ما همه کدها رو کنار هم قرار دهیم قطعه کد زیر رو داریم:

function doubleAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x * 2);
    }, 2000);
  });
}

function addPromise(x){
  return new Promise(resolve => {
    doubleAfter2Seconds(10).then((a) => {
      doubleAfter2Seconds(20).then((b) => {
        doubleAfter2Seconds(30).then((c) => {
          resolve(x + a + b + c);
      	})
      })
    })
  });
}

addPromise(10).then((sum) => {
  console.log(sum);
});

function doubleAfter2Seconds(x) {

return new Promise(resolve => {

setTimeout(() => {

resolve(x * 2);

}, 2000);

});

}

function addPromise(x){

return new Promise(resolve => {

doubleAfter2Seconds(10).then((a) => {

doubleAfter2Seconds(20).then((b) => {

doubleAfter2Seconds(30).then((c) => {

resolve(x + a + b + c);

})

});

}

addPromise(10).then((sum) => {

console.log(sum);

});

تغییر از Promises به Async / Await

حالا کدهای بالا رو بااستفاده از Async/Await بازنویسی میکنم.تابع addPromise رو حذف میکنیم ویک تابع جدید به نام addAsync ایجاد میکنیم.این تایع دقیقا همان هدف addPromise رو دنبال میکنه.وقتی که تایع addAsync رو دارید مینویسید حتما حواستون باشه که از کلمه کلیدی async قبل از function استفاده کنید.

async function addAsync(x) {

  // code here...

}

async function addAsync(x) {

// code here...

}

حالا که یک تابع async ایجاد کردیم میتونیم از کلیدواژه await استفاده کنیم که کد ما را متوقف میکند تا زمانی که promise ما به طور کامل resolve شود.

async function addAsync(x) {
  const a = await doubleAfter2Seconds(10);
  const b = await doubleAfter2Seconds(20);
  const c = await doubleAfter2Seconds(30);
  return x + a + b + c;
}

async function addAsync(x) {

const a = await doubleAfter2Seconds(10);

const b = await doubleAfter2Seconds(20);

const c = await doubleAfter2Seconds(30);

return x + a + b + c;

}

زمانی که ما همه کدها رو کنار هم قرار دهیم قطعه کد زیر رو داریم:

function doubleAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x * 2);
    }, 2000);
  });
}

async function addAsync(x) {
  const a = await doubleAfter2Seconds(10);
  const b = await doubleAfter2Seconds(20);
  const c = await doubleAfter2Seconds(30);
  return x + a + b + c;
}


addAsync(10).then((sum) => {
  console.log(sum);
});

function doubleAfter2Seconds(x) {

return new Promise(resolve => {

setTimeout(() => {

resolve(x * 2);

}, 2000);

});

}

async function addAsync(x) {

const a = await doubleAfter2Seconds(10);

const b = await doubleAfter2Seconds(20);

const c = await doubleAfter2Seconds(30);

return x + a + b + c;

}

addAsync(10).then((sum) => {

console.log(sum);

});

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

جدیدترین دوره

استفاده از Google Analytics در React Native

محبوب ترین دوره

آموزش مقدماتی react native

جدیدترین دوره

استفاده از Google Analytics در React Native

محبوب ترین دوره

آموزش مقدماتی react native

برنامه نویسی

Async/Await در جاوااسکریپت

Async/Await چیست؟

Syntax

Await

تغییر از Promises به Async / Await

چگونه یک اپلیکیشن اعتیاد آور داشته باشیم

آپدیت درونی اپلیکیشن های react native از سمت سرور

نظر بدهید لغو پاسخ

جدیدترین دوره

محبوب ترین دوره

ورود با حساب کاربری سایت شما

جدیدترین دوره

محبوب ترین دوره

برنامه نویسی

Async/Await چیست؟

Syntax

Await

تغییر از Promises به Async / Await

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

نظر بدهید لغو پاسخ