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

بخندید و برنامه نویسی یاد بگیرید!

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

هدف ما اینست که سهم هر چند کوچک در آموزش طراحی و برنامه نویسی داشته باشیم و همراه با خنده و تفریح آموزش بدیم!

مشاهده آموزش ها
کل آموزش ها
25
نظرات و عقیده
11
وردپرس
8
آموزش طراحی
5

مراحل طراحی یک قالب وردپرس

طراحـــــی ، قدرت تخیلی در قالب کد

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

آموزش کامل Promise ها در جاوا اسکریپت و رابطه آن با توابع async

آموزش کامل Promise ها در جاوا اسکریپت و رابطه آن با توابع async

 

آموزش Promise جاوا اسکریپت برای خلاصی از شر توابع callback !

 

توابع callback را به یاد می‌آورید؟ در واقع توابع کالبک توابعی هستند که به عنوان یک آرگومان به یک تابع پاس داده می‌شوند و بعد از اجرای برخی عملیات که مد نظر برنامه‌نویس است، این توابع اجرا می‌شوند؛ اگر تجربه‌ی زیادی با جاوا اسکریپت نداشته باشید، قاعدتا شما خواهید پرسید که « این کار چه فایده‌ای دارد؟ » هر چند مثال عملی در این موضوع میزنیم ولی توضیح ساده و عمیقی هم خدمتتان ارائه می‌کنیم که به صورت کامل متوجه این موضوع شوید.

تصور کنید شما یک آرایه دارید که دو‌تا Object درون آن قرار گرفته، می‌خواهید یک Object دیگر به آن اضافه کنید ولی این Object آخری اطلاعاتی دارد که باید از دیتابیس گرفته شود یا به هر نحوی انجام این‌کار زمان‌بر است؛ خب، حقیقت این است که شما بدون استفاده از callback یا Promise یا async/await نمی‌توانید این کار را به درستی انجام دهید. اما دلیل آن چیست؟ جاوا اسکریپت برخلاف PHP ، کد‌های شما را لاین به لاین می‌خواند، اگر ببیند اجرای یک کد زمان‌بر است از روی آن رد می‌شود و سراغ اجرای کد‌های بعدی می‌رود، سپس در زمان مقرر دوباره به سروقت همان کد باز می‌گردد و آن را به طور کامل اجرا می‌کند؛ این ویژگی بسیار خوبی است، اما این روند گاهی اوقات باعث ایجاد مشکلات و دردسر برای ما برنامه‌نویسان هم می‌شود.

جاوا اسکریپت عزیزم، قول بده اینارو اجرا کنی بعد، این یکی کد هارو اجرا کنی، منم قول میدم موفقیت آمیز بودن یا نبودنشو بهت بگم!

جاوا اسکریپت عزیزم، قول بده اینارو اجرا کنی بعد، این یکی کد هارو اجرا کنی، منم قول میدم موفقیت آمیز بودن یا نبودنشو بهت بگم!

 

این مشکل به این دلیل رخ می‌دهد که جاوا اسکریپت، کد‌های ما را به ترتیب انتظاری که داریم اجرا نمی‌کند و قاعدتا حق با جاوا اسکریپت است! این باعث می‌شود ما ارور یا حداقل نتیجه‌ای اشتباه دریافت کنیم؛ چرا که معمولا داده‌هایی که از انجام فرایند‌های زمان‌بر هستند به صورت undefined و تعریف نشده می‌شوند. بهتر است این موضوع را با مثال پیش برویم.

در واقع ما یک فرایند زمان‌بر را با استفاده از setTimeOut شبیه‌سازی کردیم؛ مثلا ۲ ثانیه طول می‌کشد که اطلاعات جدید از دیتابیس گرفته شود. اگر ما بدون استفاده از تابع callback این کار را انجام می‌دادیم قاعدتا اطلاعات جدید به آرایه‌ی ما اضافه نمی‌شدند و فقط مقادیر قبلی برای ما لاگ گرفته می‌شد. قبول نمی‌کنید؟ امتحان می‌کنیم!

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

 

با وجود callback چرا باید از Promise ها استفاده کنیم؟

 

توابع callback این مشکل را تقریبا به طور کامل رفع می‌کند؛ اما دوباره خود این توابع برای ما دردسر آفرین می‌شوند. دلیل آن این است که در پروژه‌های بزرگ که ممکن است اطلاعات زیادی را از api و… دریافت (fetch) کنید، یا یک دیتا را در دیتابیس ذخیره کنید یا… این توابع و کد‌ها خیلی تو در تو می‌شوند و عملا خواندن و فهمیدن آن‌ها کار حضرت خضر است… . Promise ساختار بسیار تمیزی را دارد و بعد از گذشت ۶ ماه اگر سر‌وقت کد‌های خود برای توسعه برگردید گیج نمی‌شوید؛ نکته‌ی دیگر این‌که از Promise ها می‌توانید به صورت زنجیر‌واری استفاده کنید که بعد از توضیح، متوجه این داستان هم خواهید شد.

resolve و reject دو آرگومان Promise ها

resolve و reject دو آرگومان Promise ها

چگونه از Promise ها استفاده کنیم؟

 

بسیار ساده! Promise ها چند کلمه‌ی کلیدی دارند که با استفاده از آن‌ها می‌توانید کار خود را هندل کنید؛ این کلمات عبارتند از:

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

متاسفانه توضیح لغوی آن کمی گنگ و سخت است و بهتر است این موارد را خودتان ببینید؛ پس ما دوباره مثال‌های خود را از سر می‌گیریم. بیایید همان کد کاربران و سن آن‌ها‌را با Promise پیاده‌سازی کنیم.

اگر دقت کنید به سادگی متوجه می‌شوید که تابع addPersion در واقع یک Promise را بر‌می‌گرداند که بعد از اجرا، با استفاده از then که معرفی کردیم، تعیین می‌کنیم که بعد از این که دو نفر بعدی نیز به آرایه‌ی ما اضافه شدند، از این آرایه لاگ گرفته شود و این‌کار را با یک forEach ساده انجام می‌دهیم و با بک تیک مقادیر خودمان را تعیین کرده‌ایم؛ در نهایت با استفاده از catch که به شما معرفی کردیم، اگر مشکلی در اجرای کد داشتیم برای ما از ارور لاگ گرفته می‌شود؛ اما resolve و reject این کجا بود؟ عجله نکنید! گام به گام پیش می‌رویم که شما واقعا این موضوع را درک کنید.

Async/await یه جورایی برادر Promise هاست

Async/await یه جورایی برادر Promise هاست

 

تمام تلاش من این است که به شما نشان دهم resolve و reject چیز عجیب غریبی نیستند و شبیه یک return کردن عمل می‌کنند با تفاوت اینکه به یک آرگومان پاس داده می‌شوند؛ فکر می‌کنم با این مثال بتوانید بهتر و مفهومی‌تر این موضوع را یاد بگیرید.

می‌بینید؟ در کد بالا گفتم اگر sum برابر با ۲۰ بود، آقا resolve را اجرا کن. این مثال را زدم که متوجه شوید می‌توانید برعکس هم این‌کار را بکنید و یک تابع را به درون resolve بفرستید و آن را به کمک آن اجرا کنید! خب اگر sum برابر با ۲۰ نبود با reject یک ارور را مشخص کردیم که با استفاده از catch، از آن لاگ می‌گیریم. البته اصلا نیازی به تعریف تابع logSum نبود، ما می‌توانستیم درون resolve خود sum را قرار بدیم و درون then به عنوان یک آرگومان بفرستیم و بعد از آن لاگ بگیریم، اما از روی عمد بدین صورت کدنویسی کردم که داستان استفاده برعکس از resolve را هم یاد بگیرید.

 

Promise جاوا اسکریپت چه رابطه‌ای با توابع async/await دارند؟

 

ببینید در اصل خود توابع Async نیز یک Promise را بر‌‌می‌گردانند! می‌توانید با خیال راحت از یکی به دیگری سوئیچ کنید و قاعدتا مشکلی هم در این موضوع نخواهید داشت، این یعنی می‌توانید حتی توابع Async را با استفاده از then و catch هندل کنید. در این موضوع مثال خوبی در MDN – Async function زده شده است.

در پایان خودم هم یک مثال از این موضوع می‌زنم که دقیقا برعکس مثال MDN است؛ در MDN یک Promise با یک تابع async هندل شده؛ ولی ما قصد داریم یک تابع async را با استفاده از Promise ، هندل کنیم. قبلا گفته بودم که می‌توانید از یکی به دیگری سوئیچ کنید.

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

به نظر می رسد که شما نوتیفیکیشن را مسدود کرده اید!
اشتراک گذاری
شاید این مطالب را نیز بپسندید
دیدگاه یا سوال خود را مطرح کنید
guest
3 نظر/ سوال و جواب
قدیمی ترین
جدید ترین پر سر و صدا ترین
Inline Feedbacks
View all comments
مهران
مهران
3 ماه پیش

ممنون خیلی مقاله کاملی بود

علیرضا موسوی
علیرضا موسوی
3 ماه پیش

عالی!
احسان جان آموزش هات عالی هستن 👍♥️

3
0
اگر سوال یا دیدگاهی دارید ، مطرح کنید!x
()
x