آشنایی با Promise در جاوااسکریپت
در این مقاله سعی کردم اصول و مفاهیم اولیه Promise رو بیان کنم. این مقاله به شما کمک میکنه تا دانش پایه ای که برای کار با Promise در جاوااسکریپت نیاز دارید یاد بگیرید و از این دانش در برنامه هاتون استفاده کنید.
چرا ما به Promise نیاز داریم؟
Promise (مانند callbacks) به ما اجازه میده تا منتظر اجرای یک قطعه کد خاص بمونیم تا قطعه کد بعدی اجرا بشه.
چرا این موضوع مهمه؟تصور کنید که اطلاعات یک سایت داره از یک API خونده میشه ، بعد از بارگیری کامل ،داده ها برای نمایش دادن به کاربر پردازش و قالب بندی میشه.اگه ما تلاش کنیم داده ها رو قبل از بارگیری کامل پردازش و قالب بندی کنیم در واقع یک وب سایت بدون محتوا به کاربر نمایش میدیم.با استفاده از Promise میتونیم مطمئن بشیم که اطلاعات کاملا بارگیری شده و بعد شروع به پردازش و نمایش اطلاعات به کاربر کنیم.
Promise چیه؟
در جاوااسکریپت Promise نشان دهنده نتیجه یک عملیات ناهمزمان است . Promise رو میشه به عنوان یک نگهدارنده تصور کرد. این نگهدارنده در واقع یک object است که میتونیم callbacks رو بهش پیوست کنیم.
Promiseها میتونن یکی از سه حالت زیر داشته باشند:
- Pending : عملیات هنوز کامل نشده است.
- Fulfilled : عملیات کامل شده و Promise دارای یک مقدار است.
- Rejected : عملیات انجام شده اما شکست خورده یا با مشکل روبرو شده است.
کار کردن با Promise
اغلب اوقاتی که با Promise کار میکنیم ، با Promiseهایی سروکار داریم که توسط توابع بازگشت داده شدن.با وجود این میتونیم Promise رو در سازنده تعریف کنیم.
بیاین یک مثال ساده از Promise رو ببینیم:
|
1 |
runFunction().then(successFunc, failureFunc); |
در مثال بالا ابتدا ()runFunction فراخوانی میشه.از اونجایی که ()runFunction یک Promise رو برمیگردونه ، تنها زمانی که Promise اجرا شده باشه successFunc یا failureFunc اجرا میشه.اگه عملیات کامل شده باشه و Promise یک مقدار داشته باشه successFunc فراخوانی میشه و اگه عملیات با شکست ربرو شده باشه failureFunc فراخوانی میشه.
یک مثال از Promise
در این مثال ما خودمان Promise را ایجاد میکنیم
|
1 2 3 4 5 6 7 8 9 10 11 |
function delay(t){ return new Promise(function(resolve){ return setTimeout(resolve, t) }); } function logHi(){ console.log('hi'); } delay(2000).then(logHi); |
در مثال بالا دوتابع ()delay و logHi رو داریم.تابع logHi در کنسول hi رو نمایش میده اما تابع delay یک مقدار پیچیده است.این تابع یک رو برمیکردونه که بعد از یک دوره زمانی اجرا میشه.ما از ()then برای دریافت جواب نهایی استفاده میکنیم.
با توجه به این ما یک تاخیر 2000 میلی ثانیه ای خواهیم داشت و بعد از اینکه Promise کاملا اجرا شد در کنسول hi نمایش داده خواهد شد.
Promiseهای زنجیره ای
یکی از مزایای اصلی Promise این است که به ما اجازه میدهد یک سری عملیات های زنجیره ای غیر همزمان رو با اهم اجرا شونداین بدان معنی است که فقط زمانی میتوانیم یک عملیات را اجرا کنیم که عملیات قبلی با موفقیت اجرا شده باشد.بیاین به مثال زیر یک نگاهی بندازیم
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 2000); }).then((result) => { alert(result); return result + 2; }).then((result) => { alert(result); return result + 2; }).then((result) => { alert(result); return result + 2; }); |
در مثال بالا Promise بعد از 2000 میلی ثانیه تاخیر با مقدار (1) resolve میشود.سپس()then فراخوانی میشود و مقدار 1 نمایش داده میشود ، در نهایت 2 به مقدار اضافه میشود و مقدار جدید از 3 بازگشت داده میشود.این مقدار به پردازنده بعدی منتقل میشود و این فرآیند تکرار می شود.
بدیهی است که این یک مثال واقعی نیست اما این مثال به ما نشان داد که Promiseها چطوری میتونند مانند یک زنجیر شوند.Promiseهای زنجیره ای برای وظایف خاصی در جاوااسکریپت از قبیل بارگیری منبع خارجی یا منتظر ماندن برای اطلاعات API قبل از پردازش مناسب است.
مدیریت خطا
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 2000); }).then((result) => { alert(result); return result + 2; }).then((result) => { throw new Error('FAILED HERE'); alert(result); return result + 2; }).then((result) => { alert(result); return result + 2; }).catch((e) => { console.log('error: ', e) }); |
در مثال بالا چه اتفاقی می افتد:
- Promise بعد از 2 ثانیه مقدار 1 را میگیرد
- این مقدار به اولین ()then پاس داده میشود و مقدار 1 در صفحه نمایش نشان داده میشود سپس 2 به مقدار قبلی اضاف میشود و مقدار 3 به ()then دومی پاس داده میشود.
- یک خطای جدید رخ میدهد و عملیات فورا متوقف میشود و Promise به حالت rejected تغییر حالت میدهد.
- ()Catch خطا را دریافت میکند و در صفحه نمایش logs میکند.
اطلاعات اضافی در مورد Promise ها رو میتونید از اینجا و اینجا بخونید.امیدوارم این مقاله یک مقدمه خوب برای Promise در جاوا اسکریپت برای شما باشه.
اگر قصد یادگیری جاوا اسکریپت به صورت تخصصی و حرفه ای را دارید، پیشنهاد می کنم آموزش پیشرفته و پروژه محور جاوا اسکریپت (javascript) را مشاهده کنید
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش کار با timing event ها
تفاوت توسعه برنامه های android و ios
معرفی DOM به زبان ساده
constructor function در جاوااسکریپت
factory function در جاوا اسکریپت
13 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام ممنون برای من مفید بود
سلام.خواهش میکنم
خوشحالیم که مطالب براتون مفید بوده
خیلی ممنون واقعا
برام جذاب بود.
ممنون فرهاد عزیز، کامنت شما انگیزه زیادی رو به ما میده
مثالی که واسه Promise های زنجیره ی اوردین رو اجرا میکنم خطا میگیره.
اول همه هم میگه alert is not define
فایلی که کدها رو در اون اجرا میکنید js هست؟
avalin bari bod k y kam dark kardam promise ro mrc
خیلی عالی
افتضاح توضیح دادی داداش
افتضاح
ممنون از انتقادتون.شما بهتر آموزش بدید تا یاد بگیریم
شاید مشکل از خودت باشه که نمیفهمی
اون موقع میگی طرف بد توضیح داده !!!!!!1
مطالبتون و اموزشاتون در مورد جاوا اسکریپت رو دنبال میکنم واقعا عالی هستید
ممنون از شما و انرژِی که به ما میدین میتونید در کانال تلگراممون هم عضو بشید تا به راحتی از جدید ترین نوشته ها و اموزش هامون مطلع بشید، در ادامه لینکشو براتون قرار میدم
لینک کانال تلگرام
https://t.me/reactapp_ir