مفهوم promise در جاوا اسکریپت

سلام رفقا

امیدوارم حالتون عالی باشه.

امروز میخوایم یه ویژگی مهم ES6 در جاوا اسکریپت رو بررسی کنیم که خیلیا فک میکنن سخته ولی اگه این مقاله رو کامل بخونی به راحتی متوجه میشی.

میخوایم ببینیم promise در جاوا اسکریپت چیه و چطوری میشه ازش استفاده کرد.

پرامیس که برای مدیریت کردن عملیات ناهمگام استفاده میشه، یکی از کاربردی‌ترین ویژگی‌های جاوااسکریپت هست که از ES6 به این زبان اضافه شده. توی این قسمت می‌خوایم این موضوع کاربردی رو بررسی کنیم.

اول ببینیم عملیات ناهمگام چیه؟

عملیات ناهمگام به عملیاتی گفته میشه جدا از روند اصلی برنامه پردازش میشه

توی جاوااسکریپت، تابع setTimeout یکی از معروف‌ترین مثال‌ها برای درک مفهوم عملیات ناهمگام هست. با این تابع می‌تونیم قطعه کدی رو بعد از یک تأخیر معین اجرا کنیم. کد زیر رو در نظر بگیرین:

متد setTimeout دو تا ورودی میگیره:

ورودی اول یه تابع هست و شامل عملیاتی میشه که میخوایم اونو با تاخیر انجام بدیم.

ورودی دوم میگه من بعد از چند ثانیه تاخیر، کدهایی که نوشتی رو اجرا کنم، که در اینجا 3000 میلی ثانیه یعنی 3 ثانیه هستش.

زمانی که این قطعه کد رو اجرا کنیم، ابتدا خط 5 (عملیات دوم) به ما هشدار داده میشه و بعد از 3 ثانیه alert خط 2

به این میگن عملیات ناهمگام.

توی جاوااسکریپت، یک سری عملیات مثل اتصال به یک منبع خارجی با Ajax و WebSocket و یا خوندن و نوشتن اطلاعات توی دیتابیس و هارددیسک، جدا از روند اصلی برنامه اجرا میشن. این یعنی عملیات ناهمگام.

ما در جاوا اسکریپت دو نوع عملیات داریم:

1. همگام

2. ناهمگام

همگام یعنی برنامه خط به خط کدهارو اجرا کنه.

ناهمگام یعنی اون خط از کدهایی که تایمر دارن بعدا اجرا بشه. و جاوا اسکریپت منتظر نمونه.

حالا در promise من که برنامه نویس باشم، بهش میگم که چطوری عملیات های ناهمگام رو مدیریت کن. شاید خواستم اول تایمر اجرا شه و بعدش دستورات دیگه ....

پس با promise این کار رو انجام میدیم...

درباره promise :

پرامیس‌ها برای مدیریت کردن عملیات ناهمگام استفاده میشن. نحوه نوشتن یک promiseخیلی راحته. ابتدا با ساختار اون بشیم و بعد مثال بالا رو با promise خواهیم نوشت:

کلاس promise فقط یک آرگومان می‌گیره و اون هم یک تابع هست. این تابع که توی اون باید عملیات ناهمگامِمون رو بنویسیم، بلافاصله وقتی یک promise ساخته شد اجرا میشه.

حالا بیاین مشکلی که توی مثالمون داشتیم رو با پرامیس‌ها حل کنیم تا با ساختار اون بیشتر آشنا بشیم

با اجرای این کد ابتدا با یک تاخیر 3 ثانیه‌ای alert خط 3 اجرا میشه (یعنی همون عملیات اولمون) و بعدش alert خط 8 (عملیات دوم) اجرا میشه.

پس ما تونستیم عملیات ناهمگام رو مدیریت کنیم.

بریم سراغ جزئیات...

ببینیم resolve و reject چی هستن؟؟؟

همونطور که می‌بینیم تابعی که به promise پاس دادیم دو تا پارامتر می‌گیره که اولی resolve و دومی reject هست:

هر دو پارامتر باید به شکل یک تابع توی promiseصدا زده بشن. یعنی :

ما توی promise باید به جاوااسکریپت بگیم که کارِ ما به پایان رسید. چون جاوااسکریپت خودش متوجه به پایان رسیدن این عملیات نمیشه. وقتی عملیات ما به پایان رسید، اگر خروجی کار موفقیت‌آمیز بود، باید resolve رو صدا بزنیم و اگر خطا داشت reject

اگه عملیات موفقیت‌آمیز بود

توی promise که نوشتیم توی خط ۴ resolve رو صدا زدیم به این معنی که عملیات ما با موفقیت به پایان رسیده:

چرا باید به جاوا اسکریپت بگیم که عملیات ما به پایان رسید؟ برای اینکه بتونیم بعد از به پایان رسیدن عملیات ناهمگام، کار مد نظرمون رو انجام بدیم. توی مثالی که داشتیم، کار مد نظرمون رو به این صورت انجام دادیم:

همونطور که می‌بینیم از متغیر promise که مقدار اون یک promise هست، یک متد به اسم then رو صدا زدیم و به اون تابعی رو پاس دادیم. این تابع بلافاصله، زمانی اجرا میشه که ما توی پرامیس resolve رو صدا زده باشیم! پس کاری که می‌خوایم بعد از به پایان رسیدن عملیات ناهمگام اجرا بشه رو با then انجام میدیم.

اگه عملیات با خطا مواجه شد

اگه عملیات ناهمگام با خطا مواجه شد، باید توی پرامیس reject رو صدا بزنیم:

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

همونطور که می‌بینیم، توی catch یک تابع تعریف کردیم. این تابع بلافاصله بعد از اینکه پرامیس reject شد اجرا میشه.

به متدهای then و catch میگیم Handler به‌معنی کنترل‌کننده نتیجه عملیات ناهمگام.

ما برای مدیریت کردن خطای پرامیس می‌تونیم به جای متدcatch از آرگومان دوم متد then کمک بگیریم:

وضعیت های promise :

دیدیم که نتیجه پرامیس یا موفقیت‌آمیز هست یا رد شده. در واقع یک پرامیس همیشه سه حالت داره:

حالتpending

حالتfullfilled

حالتrejected

۱. حالت Pending

این حالت یعنی حالت انتظار. پرامیس در ابتدا و وقتی که ساخته میشه، در این حالت قرار داره:

این حالت تا زمانی که resolve یا reject صدا زده نشه باقی می‌مونه.

2. حالت fulfilled :

حالت پرامیس وقتی resolve رو صدا بزنیم در حالت Fulfilled یعنی برآورده شده و موفقیت‌آمیز بودن قرار می‌گیره:

توی این کد، پرامیس بعد از 3 ثانیه توی وضعیت Fulfilled قرار می‌گیره چون resolve رو صدا زدیم.

3. حالت rejected :

حالت پرامیس وقتی reject رو صدا بزنیم در حالت Rejected قرار می‌گیره. یعنی عملیات ناهمگام موفقیت‌آمیز نبود:

توی این کد، پرامیس بعد از 3 ثانیه توی وضعیت Rejected قرار می‌گیره چون reject رو صدا زدیم.

نکته‌ای که باید در نظر داشته باشیم اینه که پرامیس فقط می‌تونه توی یک کدوم از حالت‌های Fulfilled و یا Rejected قرار بگیره:

خیلی سعی کردم مفهوم promise در جاوا اسکریپت رو به زبان خیلی ساده و خفن توضیح بدم.

امیدوارم که متوجه شده باشین.

اگه از این مقاله خوشت اومد، ازت میخوام که این مفهوم رو به بقیه هم یاد بدی و برام دعا کنی.

دوستون دارم.