نحوه تبدیل Callback به Promise و Async/Await در Javascript



visibility  
mode_comment   ۰

نحوه تبدیل Callback به Promise و Async/Await در Javascript

در این مطلب یاد میگیریم که از دست Callback ها راحت بشیم و خوانایی کدها رو بالا ببریم. همچنین نحوه تبدیل Callback به Promise و Async/Await آموزش داده میشه.

همونطور که میدونین در برنامه‌نویسی Asynchronous ما نمیدونیم که کار Async چه زمانی به پایان میرسه و به همین خاطر از Callback استفاده میکنیم. Callback یک تابع هست و زمانی فراخوانی میشه که کار Async به پایان رسیده باشه. پس با استفاده از Callback میتونیم کار خاصی رو بعد از به اتمام رسیدن فعالیت Async انجام بدیم.

اگر کار مورد نظر موفقیت‌آمیز باشه که اطلاعات در اختیارمون قرار میگیره و اگر هم اروری وجود داشته باشه میتونیم اون رو دریافت کنیم و Error handling رو انجام بدیم.

زمانی که از Callback ها استفاده میکنیم، اغلب به مشکلات خوانایی کد برمیخوریم چون بعضی مواقع ممکنه که 10 مورد Callback تودرتو داشته باشیم و اصطلاحا به این مورد Callback hell یا جهنم Callback میگن.

فرض کنید که یک تابع بصورت زیر تعریف کردید و به اون 2 تابع Callback پاس میدید که یکی برای موفقیت و دیگری برای ارور هست:

معمولا بیشتر کارهای Async زمانی پیش میاد که منتظر جواب درخواستی از سرور باشیم. اما در بالا برای اینکه این حالت Async رو به وجود بیاریم از setTimeout استفاده کردیم تا همون حالت رو شبیه‌سازی کنیم و مثال ساده‌تری رو بهتون توضیح بدم. برای setTimeout عدد 2000 رو قرار دادیم که باعث به وجود آوردن تاخیر 2 ثانیه‌ای میشه.

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 11)

خب تابع someFunctionWithCallback تعدادی آرگومان رو دریافت میکنه که 2 تای آخری Callback هستند. اگر argOne و argTwo رو تعریف کرده باشیم، SuccessCallback و در غیر اینصورت errorCallback فراخوانی میشه و متنی رو برای هر کدام قرار میدیم.

خب حالا میخوایم  بجای استفاده از Callback از Promise و Async/Await استفاده کنیم.

نحوه تبدیل Callback به Promise و Async/Await

برای اینکار یک تابع دیگری که تابع قبلی رو در بر میگیره و اون رو wrap میکنه (wrapper function) به وجود میاریم:

میبینید که تابع someFunctionWithPromise دو ورودی که همون argOne و argTwo هست رو میگیره و در اون یک Promise ساخته میشه و برگشت داده میشه. یعنی وقتی تابع someFunctionWithPromise فراخوانی میشه، یک Promise برگشت داده میشه که میتونیم اون رو handle کنیم.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

درون Promise همون تابع someFunctionWithCallback رو فراخوانی کردیم و بجای successCallback تابع resolve و بجای errorCallback تابع reject رو پاس میدیم. همونطور که میدونین در Promise ها همیشه resolve و reject وجود دارند. استفاده کردن از این دو مورد به خودمون برمیگرده. وقتی که خودمون به این نتیجه رسیدیم که جایی از کار Async ما با موفقیت به پایان رسیده میتونیم از resolve استفاده کنیم و چیزی رو درون اون قرار بدیم.

با اینکار کدهایی که درون متد then هستند فراخوانی میشه و چیزی که در resolve پاس دادیم در اختیار متد then قرار میگیره. همین حالت برای تابع reject و catch هم به وجود میاد.

در ادامه این موارد رو با هم بررسی میکنیم.

همونطور که در بالا میبینید تابع someFunctionWithPromise رو فراخوانی کردیم و 2 ورودی رو به اون پاس دادیم. زمانی که این تابع رو فراخوانی میکنیم، یک promise درست میشه که میتونیم با استفاده از then و catch اون رو مدیریت کنیم. در حالت بالا چون 2 ورودی داریم، پس resolve فراخوانی میشه و در نتیجه کدهای درون then اجرا میشن.

حالا اگر بخواهیم همین کار رو با Async/Await انجام بدیم بصورت زیر خواهد شد:

همونطور که میبینید یک IIFE تعریف کردیم که کلمه کلیدی async رو قبل از اون قرار دادیم. با اینکار مشخص میکنیم که درون اون تابع میتونیم از await استفاده کنیم.

برای Error handling از try...catch استفاده کردیم.در قسمت try تابع someFunctionWithPromise رو با دو ورودی فراخوانی میکنیم و کلمه کلیدی await رو پشت اون قرار میدیم. Async/Await یک مبحث جدید نیستند و تنها یک خلاصه نویسی برای then و catch هستند و با استفاده از اونا میتونیم راحتتر Promise ها رو مدیریت کنیم.

خب جواب تابع رو درون متغیر successArgs میریزیم و بعد از اون از Console.log استفاده میکنیم. اگر ارور هم به وجود بیاد اون رو نیز چاپ میکنیم.

اگر بخواید حالت ارور رو هم بررسی کنید میتونین بصورت زیر عمل کنید:

میبینید که در بالا فقط یک ورودی رو به تابع پاس دادیم و باعث به وجود اومدن ارور میشه و به همین دلیل کدهای درون catch اجرا میشن.

به همین راحتی.

برای یادگیری بهتر Promise میتونین این مقاله از وبسایت سون لرن رو مطالعه کنید.

شما با استفاده از سایت promise-me، میتونین کدهایی که در اونا از Callback استفاده میکنید رو به Promise تبدیل کنید.

برای مطالعه بیشتر در این زمینه میتونین این مقاله رو مطالعه کنید.

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

نتیجه گیری

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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.