همه چیز در مورد ویژگی‌های اضافه شده به Javascript در Ecmascript 2017 - قسمت 2 - کار با async/await



visibility  
mode_comment   ۰

همه چیز در مورد ویژگی‌های اضافه شده به Javascript در Ecmascript 2017 - قسمت 2 - کار با async/awaitدر این قسمت میخوام مطلب همه چیز در مورد ویژگی‌های اضافه شده به Javascript در Ecmascript 2017 رو ادامه بدم و اطلاعات بیشتری رو در مورد Ecmascript 2017 در اختیارتون قرار بدم.

در قسمت قبل ویژگی‌های Object.values و Object.entries و String padding و Object.getOwnPropertyDescriptors رو بهتون توضیح دادم و با استفاده از مثالهای متنوع کاربرد اونا رو نشون دادیم.

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

5. اضافه کردن trailing comma در پارامترهای تابع

trailing comma یا کامای اضافه یک ویژگی جالب هست که به شما این امکان رو میده که بعد از آخرین پارامتر تابع، یک comma قرار بدین. حالا ممکنه بپرسید که این ویژگی به چه دردی میخوره. فرض کنید که برنامه‌نویس 1 کد زیر رو به وجود بیاره:

همونطور که میبینید این تابع 2 پارامتر داره و بعد از age هم کاما وجود نداره. خب حالا برنامه‌نویس 1 کدهاش رو در git بررسی میکنه و اونا رو با پیامی خاص commit میکنه. پس تا اینجا مشخص هست که برنامه‌نویس 1 این تغییرات رو به وجود آورده است و امکاناتی مانند git blame هم میتونه کمک کنه که کدام برنامه‌نویس در خط خاصی از برنامه تغییرات به وجود آورده است.

حالا که برنامه‌نویس 1 از کامای اضافه یا trailing comma استفاده نکرده است، برنامه‌نویس 2 میخواد پارامتری رو به این تابع اضافه بکنه. بصورت زیر:

همونطور که میبینید برنامه‌نویس 2 یک comma بعد از age قرار داده و پارامتر جدید address رو نیز اضافه کرده است. ولی اگر تغییرات رو در git مشاهده کنید، خواهید دید که برای خطی که comma اضافه کرده است نیز، تغییرات به نام برنامه‌نویس 2 ثبت شده است، در صورتی که age رو برنامه‌نویس 1 تعریف کرده بود.

برای اینکه این مشکلات پیش نیاد، کافیه که برنامه‌نویس 1 از trailing comma استفاده کنه و بعد از age یک comma قرار بده. بصورت زیر:

بخاطر اینکه آخرین پارامتر comma داره، دیگه برنامه‌نویس 2 تغییری در این خط به وجود نمیاره و فقط پارامتر جدید به نام اون ثبت میشه و کار ما خیلی راحتتر میشه.

6. کار با Async/Await

این مورد یکی از مهم‌ترین و کاربردی‌ترین ویژگی‌های اضافه شده به Ecmascript 2017 هست که بهتره حتما کار با اون رو یاد بگیرید.

توابع async این امکان رو در اختیار ما قرار میدن که با جهنم callback یا callback hell خدافظی کنیم و ساده‌تر و با خوانایی بیشتر با کدهای Asynchronous کار کنیم.

وقتی کلمه async رو قبل از یک تابع قرار میدیم، به موتور Javascript میگیم که با این تابع متفاوت از بقیه برخورد بکنه. هر زمان که Compiler به کلمه await درون تابع میرسه، متوقف میشه. Javascript فرض میکنه که هر چیزی که بعد از کلمه await باشه، یک Promise رو برگشت میده و به همین دلیل منتظر میمونه که Promise با موفقیت یا شکست به پایان برسه و بعد از اون کدهای تابع رو ادامه میده. مثال زیر که با استفاده از ES2015 مدیریت شده است رو مشاهده کنید:

همونطور که میبینید 2 تابع getUser و getBankBalance هر کدام یک Promise رو برگشت میدن و اطلاعاتی رو بعد از گذشت 1000 میلی‌ثانیه در اختیارتون قرار میدن. در تابع getAmount با استفاده از متد then این Promise ها رو مدیریت کردیم و در نهایت مقدار amount رو در console چاپ کردیم.

حالا اگر getAmount('1') رو اجرا کنیم، خروجی $1,000 خواهد بود.

حالا اگر بخوایم با استفاده از async/await این کار رو انجام بدیم، بصورت زیر خواهد شد:

همونطور که میبینید قبل از تابع مورد نظر کلمه کلیدی async رو قرار دادیم و درون تابع نیز قبل از Promise کلمه await رو قرار دادم و اون رو درون متغیر مورد نظر ریختم. اگر کد رو مجددا اجرا کنیم، خروجی همانند قبل خواهد بود. میبینید که خوانایی کدها بالاتر رفته و راحتتر میشه کدها رو فهمید. حالا میخوام نکات کلیدی مربوط به async/await رو بهتون توضیح بدم.

6.1 . توابع async خودشون یک promise برگشت میدن

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

همونطور که میبینید تابع doubleAfter1Sec یک ورودی رو میگیره و بعد از 1 ثانیه مقدار ورودی رو 2 برابر میکنه و اون رو بصورت Promise برگشت میده.

تابع doubleAndAdd نیز که بصورت async تعریف شده است، 2 ورودی داره که این ورودی‌ها در doubleAfter1Sec قرار میگیرن و جمع اونا برگشت داده میشه. همونطور که قبلا گفته شد، توابع async خودشون یک promise برگشت میدن. پس همونطور که در خط پایانی مشاهده میکنید، با استفاده از متد then نتیجه اون رو در console چاپ کردیم. با اینکار عدد 6 در console چاپ خواهد شد.

6.2 . فراخوانی async/await  بصورت موازی یا Parallel

در مثال قبل 2 بار از await استفاده کردیم و برای هر کدام 1 ثانیه منتظر موندیم و کلا 2 ثانیه طول کشید تا جواب به دست ما برسه. از اونجایی که a و b مستقل از یکدیگر هستند، شما میتونین با استفاده از Promise.all اونا رو بصورت موازی یا Parallel اجرا کنید و سریعتر به جواب مورد نظرتون دست پیدا کنید. برای اینکار بصورت زیر عمل میکنیم:

همونطور که میدونین Promise.all یک آرایه از جوابهای Promise ها رو برگشت میده و شما میتونین با استفاده از Array destructuring به مقادیر مورد نظرتون دسترسی داشته باشید. با این روش دیگه نمیخواد برای هر Promise جداگانه منتظر بمونیم و همه Promise ها بصورت موازی اجرا میشن و زودتر به پاسخ خواهیم رسید. اگر کد بالا رو اجرا کنید، تقریبا 1 ثانیه طول خواهد کشید.

6.3 . نحوه Error handling توابع async/await

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

گزینه اول - استفاده از try...catch درون تابع async:

کد زیر رو ببینید:

در تابع doubleAfter1Sec ورودی رو 2 برابر کردیم و اگر خروجی عدد نباشه، reject رو فراخوانی میکنیم. در تابع doubleAndAdd کدها رو درون try...catch قرار دادیم و اگر یکی از این Promise ها reject بشه، اجرای برنامه وارد بلاک catch میشه و مقدار NaN برگشت داده میشه. در 2 خط آخر نحوه استفاده و خروجی‌ها قرار داده شده که همونطور که میبینید رشته one چون عدد نیست، خروجی NaN رو به وجود میاره.

گزینه دوم - استفاده از catch برای هر عبارت بعد از await:

از اونجایی که هر await یک Promise رو برگشت میده شما میتونین برای هر کدام بصورت جداگانه از Catch استفاده کنید و ارورهای اونا رو مدیریت کنید. کد زیر رو ببینید:

همونطور که میبینید برای هر await یک catch قرار دادیم و ارورها رو بصورت جداگانه مدیریت کردیم. خروجی در 2 خط پایانی نشون داده شده است.

گزینه سوم - استفاده از Catch برای کل تابع async:

همونطور که در اینجا میبینید در انتهای کدهای بالا از catch برای کل تابع doubleAndAdd استفاده کردیم و با اینکار اگر اروری رخ بده، در console چاپ میشه.

نتیجه‌گیری

همونطور که دیدید همه ویژگی‌های اضافه شده به Ecmascript 2017 رو با هم بررسی کردیم و مثالهای کاربردی برای هر کدام در اختیارتون قرار داده شد. پیشنهاد میکنم که این ویژگی‌ها رو به خوبی یاد گرفته و از اونا در پروژه‌هاتون استفاده کنید تا همیشه از کدهای مدرن و به روز استفاده کنید.

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

add_circle ارسال دیدگاه

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