آموزش react nativeآموزش react native
  • صفحه اصلی
  • دوره ها
    ارسال نوتیفیکیشن در React Native

    ارسال نوتیفیکیشن در React Native

    رایگان
    مشاهده
    • دوره های آموزشی
    • تله فیلم آموزشی
  • بلاگ
  • چارت آموزشی
  • تالار گفتمان
  • تماس با ما
  • درباره ما
  • کانال تلگرام
    • عضویتورود
    • سبد خرید

      0

برنامه نویسی

  • خانه
  • بلاگ
  • برنامه نویسی
  • Async/Await در جاوااسکریپت

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

  • ارسال شده توسط مهدی
  • تاریخ آذر 16, 1396
  • نظرات 0 نظر
async awain in js

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

Async/Await چیست؟

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

Syntax

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

1
2
3
4
5
6
7
8
9
10
11
// 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 بازنویسی کنیم تا ببینیم که چقدر کارمان ساده تر شده است.

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

1
2
3
4
5
6
7
function doubleAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x * 2);
    }, 2000);
  });
}

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

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

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

1
2
3
4
5
6
let sum =   doubleAfter2Seconds(10)
          + doubleAfter2Seconds(20)
          + doubleAfter2Seconds(30);
console.log(sum);
 
// undefined

 

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

1
2
3
4
5
6
7
8
function addPromise(x){
  return new Promise(resolve => {
 
    // Code goes here...  
    // resolve()
 
  });
}

 

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

1
2
3
4
5
6
7
8
9
10
11
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 رو برای اولین بار فراخوانی کردیم و مقدار 10 رو به عنوان ورودی بهش پاس دادیم.بعد از 2 ثانیه مقدار 20 درون متغیر a برگردانده میشود.
  • سپس دوباره doubleAfter2Seconds رو با مقدار 20 فراخوانی کردیم و بعد از 2 ثانیه مقدار 40 درون متغیرb برگردانده میشود.
  • برای آخرین بار doubleAfter2Seconds رو با مقدار 30 فراخوانی میکنیم و بعد از 3 ثانیه مقدار 60 درون متغیر c برگردانده میشود.
  • در نهایت Promise ما با مقدار 10+20+40+60یا130 resolve میشود.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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  استفاده کنید.

1
2
3
4
5
async function addAsync(x) {
 
  // code here...
 
}

 

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

1
2
3
4
5
6
async function addAsync(x) {
  const a = await doubleAfter2Seconds(10);
  const b = await doubleAfter2Seconds(20);
  const c = await doubleAfter2Seconds(30);
  return x + a + b + c;
}

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 در جاوا اسکریپت رو بخونید تا اطلاعات بیشتری در این زمینه بدست بیارید.

برچسب:Async/Await چیست, جاوااسکریپت, معرفی Async/Await

  • اشتراک گذاری:
مهدی
    راستشو بخواین تا قبل از دانشگاه از سیستم خونه فقط برای بازی استفاده میکردم،اما اینقدر تو این دوره به برنامه نویسی علاقه پیدا کردم که تموم وقتمو با این کار میگذرونم.به سفر،شنا و فوتبال علاقه خاصی دارم و از کدنویسی با react native لذت میبرم

    مطلب قبلی

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

    مطلب بعدی

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

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

    javascript
    چرا جاوااسکریپت ؟
    16 بهمن, 1397
    responsive-design
    ریسپانسیو کردن وب سایت با استفاده از Material-UI
    13 بهمن, 1397
    web_development
    روند طراحی وب در سال 2019
    4 بهمن, 1397

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

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    جستجو

    دسته‌ها

    • Material UI
    • React
    • React Native
    • آموزش متنی
    • استارت آپ و آموزش
    • برنامه نویسی
    • جاوااسکریپت
    • گپ و گفت

    دوره ها

    ارسال نوتیفیکیشن در React Native

    ارسال نوتیفیکیشن در React Native

    به زودی
    آموزش جاوااسکریپت (javascript)

    آموزش جاوااسکریپت (javascript)

    رایگان
    پیاده سازی تبلیغات در React Native با تپسل

    پیاده سازی تبلیغات در React Native با تپسل

    رایگان

    نوشته ها

    react hooks چیست
    چطور فقط با استفاده از React Hooks یک وب‌اپلیکیشن توسعه بدیم؟
    25بهمن1397
    کتابخانه های جاوااسکریپت
    معرفی کتابخانه Persian Tools
    24بهمن1397
    آموزش فارسی ری اکت نیتیو reactntive
    ایجاد کامپوننت Checkbox در React Native
    21بهمن1397
    • دوره های آموزشی
    • تله فیلم آموزشی
    • آموزش متنی
    • سوالات متدوال
    • بلاگ
    • درباره ما
    • تماس با ما

    reactapplogo

    09150274110

    contact@reactapp.ir

    کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.

    • قوانین
    • چارت آموزشی
    • کانال تلگرام

    ورود به حساب کاربری

    رمز عبوررا فراموش کرده اید؟

    هنوز عضو نیستید؟همین حالا عضو شو!

    عضویت

    هم اکنون غضو هستید؟وارد شوید