آموزش کامل Promise و Async/Await در JavaScript با مثال‌های واقعی

اگر تا به حال با جاوااسکریپت کار کرده باشید، حتماً با موقعیت‌هایی مواجه شده‌اید که باید منتظر دریافت اطلاعات از یک سرور می‌ماندید، یا نیاز داشتید یک فایل را بخوانید و بعد از اتمام خواندن، عملیات بعدی را انجام دهید. این دقیقاً همان جایی است که مفهوم برنامه‌نویسی ناهمگام یا Asynchronous Programming وارد می‌شود. جاوااسکریپت به عنوان یک زبان تک‌رشته‌ای یا Single-Threaded طراحی شده است. این یعنی تنها یک خط کد در هر لحظه اجرا می‌شود. حالا سوال اینجاست: اگر جاوااسکریپت تک‌رشته‌ای است، چگونه می‌تواند همزمان با ارسال درخواست به سرور، رابط کاربری را هم مدیریت کند و از فریز شدن صفحه جلوگیری کند؟ پاسخ در مکانیزم Event Loop و مدل ناهمگام جاوااسکریپت نهفته است. درک این مکانیزم و ابزارهای مرتبط با آن یعنی Callback، Promise و Async/Await برای هر توسعه‌دهنده‌ای که می‌خواهد حرفه‌ای کار کند، ضروری است. در سال‌های اولیه جاوااسکریپت، توسعه‌دهندگان از Callback Function برای مدیریت عملیات ناهمگام استفاده می‌کردند. این روش در ابتدا ساده به نظر می‌رسید، اما با پیچیده‌تر شدن برنامه‌ها، مشکلی به نام Callback Hell ظاهر شد. Callback Hell وضعیتی است که توابع Callback به صورت تو در تو و پشت سر هم فراخوانی می‌شوند و کدی غیرقابل خواندن و غیرقابل نگهداری ایجاد می‌کنند. برای حل این مشکل، مفهوم Promise در نسخه ES6 جاوااسکریپت معرفی شد. Promise یک شیء است که نمایانگر نتیجه نهایی یک عملیات ناهمگام است. این شیء می‌تواند در وضعیت موفقیت یا شکست قرار بگیرد و به توسعه‌دهنده اجازه می‌دهد کد خواناتر و ساختاریافته‌تری بنویسد. پس از Promise، در نسخه ES2017، قابلیت Async/Await معرفی شد. Async/Await یک شکل جایگزین و بسیار خواناتر برای کار با Promise است که باعث می‌شود کد ناهمگام دقیقاً شبیه کد همگام یا Synchronous به نظر برسد. این مقاله جامع قرار است شما را از Callback Hell شروع کند، به Promise برساند، سپس Async/Await را آموزش دهد و در نهایت با مثال‌های واقعی، سوالات مصاحبه و بهترین روش‌ها، شما را به یک توسعه‌دهنده حرفه‌ای در زمینه برنامه‌نویسی ناهمگام تبدیل کند.

برای درک اینکه چرا Promise و Async/Await به وجود آمدند، ابتدا باید مشکلی که قبل از آن‌ها وجود داشت را بشناسید. Callback Hell یکی از بزرگ‌ترین مشکلات برنامه‌نویسی ناهمگام در جاوااسکریپت قدیمی بود. بیایید با یک مثال ساده شروع کنیم. فرض کنید می‌خواهید سه درخواست API را به صورت زنجیره‌ای انجام دهید: اول اطلاعات کاربر را بگیرید، سپس لیست سفارش‌هایش را و در نهایت جزئیات یک سفارش خاص را دریافت کنید. کد با Callback به این شکل خواهد بود: getUser(userId, function(user) { getOrders(user.id, function(orders) { getOrderDetails(orders[0].id, function(details) { console.log(details); }, function(error) { console.log(error); }); }, function(error) { console.log(error); }); }, function(error) { console.log(error); }); همان‌طور که می‌بینید، این کد به صورت لوزی شکل به سمت راست حرکت می‌کند و هر لایه یک Callback جدید اضافه می‌کند. این الگوی کد مشکلات متعددی دارد. اول، خوانایی بسیار پایین است. تشخیص اینکه هر بخش از کد چه کاری انجام می‌دهد و ترتیب اجرا چیست، بسیار دشوار است. دوم، مدیریت خطا پیچیده می‌شود. هر Callback باید به صورت جداگانه خطاها را مدیریت کند و یک فراموشی ساده می‌تواند باعث از بین رفتن خطاها شود. سوم، اشکال‌زدایی یا Debugging بسیار سخت است. وقتی خطایی رخ می‌دهد، ردیابی اینکه خطا دقیقاً از کدام لایه آمده، زمان‌بر است. چهارم، افزودن عملیات جدید به زنجیره کار دشواری است و احتمال بروگ خطا با هر تغییر بالا می‌رود. پنجم، کنترل جریان اجرا یا Flow Control تقریباً غیرممکن است. مثلاً اگر بخواهید دو درخواست را به صورت موازی انجام دهید و بعد از اتمام هر دو، کار بعدی را شروع کنید، با Callback خالص این کار بسیار پیچیده خواهد شد. علاوه بر این‌ها، Callback Hell باعث نقض اصل DRY یا Don't Repeat Yourself می‌شود چون هر بار باید منطق مدیریت خطا را تکرار کنید. همچنین تست کردن این نوع کد بسیار دشوار است چون وابستگی‌های تو در تو، نوشتن Unit Test را سخت می‌کنند. Callback Hell یک مشکل واقعی در پروژه‌های بزرگ بود و همین مشکل باعث شد جامعه جاوااسکریپت به دنبال راه‌حل‌های بهتر بگردد. نتیجه این جستجو، معرفی Promise بود که در بخش بعدی به طور کامل آن را بررسی می‌کنیم. پس اگر هنوز در پروژه‌هایتان از Callback تو در تو استفاده می‌کنید، وقت آن رسیده که این روش قدیمی را کنار بگذارید و با Promise و Async/Await آشنا شوید.

Promise یکی از مهم‌ترین مفاهیم جاوااسکریپت مدرن است و درک آن برای هر توسعه‌دهنده‌ای ضروری است. به زبان ساده، Promise یک شیء است که نمایانگر نتیجه نهایی یک عملیات ناهمگام است. این شیء می‌تواند در آینده موفق شود یا شکست بخورد و نتیجه‌اش را به شما برمی‌گرداند. برای درک بهتر، یک تشبیه روزمره مفید است. تصور کنید آنلاین غذا سفارش می‌دهید. وقتی سفارش را ثبت می‌کنید، رستوران یک رسید به شما می‌دهد. این رسید یک Promise است: یا غذا آماده می‌شود و به دستتان می‌رسد یا مشکلی پیش می‌آید و سفارش لغو می‌شود. در هر حالت، شما می‌توانید روی این رسید برنامه‌ریزی کنید. اگر غذا رسید، آن را می‌خورید و اگر نرسید، با رستوران تماس می‌گیرید. Promise در جاوااسکریپت دقیقاً همین کار را می‌کند. برای ساخت یک Promise از کانستراکتور new Promise استفاده می‌کنیم. این کانستراکتور یک تابع به نام Executor دریافت می‌کند که خودش دو پارامتر دارد: resolve و reject. تابع Executor بلافاصله اجرا می‌شود و شما درون آن عملیات ناهمگام خود را انجام می‌دهید. وقتی عملیات با موفقیت انجام شد، تابع resolve را فراخوانی می‌کنید و نتیجه را به آن پاس می‌دهید. اگر خطایی رخ داد، تابع reject را فراخوانی می‌کنید و خطا را به آن پاس می‌دهید. مثال ساده: let myPromise = new Promise(function(resolve, reject) { setTimeout(function() { let success = true; if (success) { resolve('عملیات با موفقیت انجام شد'); } else { reject('خطایی رخ داد'); } }, 2000); }); در این مثال، یک Promise ساختیم که بعد از ۲ ثانیه بررسی می‌کند آیا عملیات موفق بوده یا نه. اگر success برابر true باشد، Promise با مقدار موفقیت Resolve می‌شود و در غیر این صورت Reject می‌شود. حالا بیایید ببینیم چگونه از نتیجه Promise استفاده کنیم. این کار با متد‌های then و catch انجام می‌شود که در بخش بعدی مفصل بررسی می‌کنیم. نکته مهم این است که Promise ذاتاً lazy نیست و تابع Executor بلافاصله اجرا می‌شود. یعنی وقتی یک Promise می‌سازید، عملیات داخل آن شروع می‌شود حتی اگر هنوز then یا catch روی آن صدا نزده باشید. این رفتار مهمی است که باید در طراحی برنامه‌ها در نظر بگیرید. همچنین توجه داشته باشید که Promise فقط یک بار وضعیت خود را تغییر می‌دهد. یعنی اگر Promise ابتدا resolve شود، دیگر نمی‌تواند reject شود و بالعکس. این ویژگی تضمین می‌کند که نتیجه یک عملیات ناهمگام قابل پیش‌بینی و قابل اعتماد باشد. Promise در ES6 معرفی شد و از آن زمان تاکنون به بخش جدایی‌ناپذیر اکوسیستم جاوااسکریپت تبدیل شده است. API‌های مرورگر مانند fetch، کتابخانه‌هایی مانند Axios و حتی Node.js به طور گسترده از Promise استفاده می‌کنند. درک عمیق Promise پایه و اساس درک Async/Await و مدیریت حرفه‌ای عملیات ناهمگام است.

هر Promise در طول عمر خود می‌تواند در یکی از سه حالت قرار بگیرد. درک این حالات برای استفاده صحیح از Promise ضروری است. حالت اول Pending است. وقتی یک Promise تازه ساخته می‌شود و هنوز عملیات ناهمگام تکمیل نشده، Promise در حالت Pending قرار دارد. در این حالت، نه نتیجه موفقیت وجود دارد و نه نتیجه شکست. Promise منتظر است تا عملیات انجام شود. حالت دوم Fulfilled یا Resolved است. وقتی عملیات ناهمگام با موفقیت انجام شود و تابع resolve فراخوانی شود، Promise وارد حالت Fulfilled می‌شود. در این حالت، Promise یک مقدار نهایی یا Value دارد که نتیجه موفقیت‌آمیز عملیات است. حالت سوم Rejected است. وقتی عملیات ناهمگام با خطا مواجه شود و تابع reject فراخوانی شود، Promise وارد حالت Rejected می‌شود. در این حالت، Promise یک دلیل خطا یا Reason دارد که مشخص می‌کند چه خطایی رخ داده است. یکی از مهم‌ترین ویژگی‌های Promise این است که انتقال بین حالات یک‌طرفه و غیرقابل بازگشت است. یعنی یک Promise می‌تواند از Pending به Fulfilled یا از Pending به Rejected برود، اما هرگز نمی‌تواند از Fulfilled به Rejected یا بالعکس تغییر کند. همچنین یک Promise نمی‌تواند بیش از یک بار Resolve یا Reject شود. اگر تابع resolve یا reject چندین بار فراخوانی شود، فقط اولین فراخوانی اثر می‌گذارد و بقیه نادیده گرفته می‌شوند. علاوه بر این سه حالت اصلی، مفهوم Settled نیز وجود دارد. Settled به معنای آن است که Promise از حالت Pending خارج شده و به Fulfilled یا Rejected رسیده است. به عبارت دیگر، Settled حالت مقابل Pending است. یک نکته مهم دیگر این است که Promise می‌تواند مقدار Fulfilled یا Rejected دیگری را Resolve کند. مثلاً اگر درون then مقداری را return کنید که خودش یک Promise باشد، then منتظر می‌ماند تا آن Promise داخلی هم Settle شود. این ویژگی باعث می‌شود Promise‌ها به راحتی زنجیر شوند. درک این حالات همچنین به شما کمک می‌کند رفتار Promise‌ها در سناریوهای مختلف را بهتر پیش‌بینی کنید. مثلاً اگر درون تابع Executor یک Exception پرتاب شود، Promise به صورت خودکار Reject می‌شود. let p = new Promise(function(resolve, reject) { throw new Error('خطای غیرمنتظره'); }); این Promise وارد حالت Rejected می‌شود و مقدار خطا، همان Error پرتاب شده خواهد بود. برای بررسی وضعیت فعلی یک Promise روش مستقیمی در زبان وجود ندارد، اما با استفاده از then و catch می‌توانید واکنش مناسب به هر حالت نشان دهید.

پس از ساخت یک Promise، نیاز دارید که به نتیجه آن واکنش نشان دهید. این کار با سه متد then و catch و finally انجام می‌شود. متد then برای مدیریت نتیجه موفقیت‌آمیز Promise استفاده می‌شود. این متد یک Callback دریافت می‌کند که مقدار Fulfilled شده Promise به عنوان پارامتر به آن پاس داده می‌شود. myPromise.then(function(result) { console.log('نتیجه:', result); }); متد then می‌تواند دو Callback دریافت کند: اولی برای موفقیت و دومی برای خطا. myPromise.then(onFulfilled, onRejected); اما استفاده از این روش توصیه نمی‌شود چون خطاهایی که درون onFulfilled رخ دهند، توسط onRejected مدیریت نمی‌شوند. به همین دلیل، بهتر است از متد catch برای مدیریت خطا استفاده کنید. متد catch برای مدیریت خطاهای Promise است. این متد یک Callback دریافت می‌کند که دلیل Rejection به عنوان پارامتر به آن پاس داده می‌شود. myPromise.catch(function(error) { console.log('خطا:', error); }); متد finally در ES2018 معرفی شد و یک Callback اجرا می‌کند صرف نظر از اینکه Promise Fulfilled شده یا Rejected. این متد برای کارهای پاکسازی مانند بستن اتصالات یا مخفی کردن اسپینر بسیار مفید است. myPromise.finally(function() { console.log('Promise settle شد'); }); نکته مهم این است که finally مقدار Promise را تغییر نمی‌دهد. اگر Promise Fulfilled باشد، finally مقدار Fulfilled را منتقل می‌کند و اگر Rejected باشد، خطا را منتقل می‌کند. مگر اینکه خود تابع finally یک Promise جدید reject شده return کند. حالا بیایید زنجیره‌سازی یا Chaining را بررسی کنیم. یکی از قدرتمندترین ویژگی‌های Promise امکان زنجیره‌سازی then‌ها است. هر then یک Promise جدید برمی‌گرداند و می‌توانید then بعدی را به آن متصل کنید. fetch('/api/user') .then(function(response) { return response.json(); }) .then(function(user) { return fetch('/api/orders/' + user.id); }) .then(function(response) { return response.json(); }) .then(function(orders) { console.log(orders); }) .catch(function(error) { console.log('خطا:', error); }); در این مثال، هر then نتیجه خود را return می‌کند و then بعدی آن نتیجه را دریافت می‌کند. اگر در هر مرحله خطایی رخ دهد، جریان اجرا مستقیماً به catch منتقل می‌شود و مراحل بعدی then اجرا نمی‌شوند. این زنجیره‌سازی مشکل Callback Hell را به طور کامل حل می‌کند چون کد به صورت خطی و خوانا نوشته می‌شود. نکته مهم دیگر این است که return از درون then بسیار حیاتی است. اگر فراموش کنید return کنید، then بعدی مقدار undefined دریافت می‌کند. این یکی از رایج‌ترین اشتباهاتی است که توسعه‌دهندگان مرتکب می‌شوند. همچنین catch می‌تواند در هر نقطه از زنجیره قرار بگیرد و خطاها را از بالادست خود مدیریت کند. یک catch می‌تواند خطا را با return کردن یک مقدار پیش‌فرض، بازیابی کند و زنجیره را ادامه دهد. مثال: fetch('/api/data') .then(function(response) { return response.json(); }) .catch(function(error) { console.log('بازیابی از خطا:', error); return { data: [] }; }) .then(function(data) { console.log('داده‌ها:', data); }); در این مثال اگر fetch با خطا مواجه شود، catch یک آبجکت پیش‌فرض برمی‌گرداند و زنجیره ادامه می‌یابد.

Async/Await یک سینتکس جایگزین برای کار با Promise است که در ES2017 معرفی شد. این قابلیت به شما اجازه می‌دهد کد ناهمگام را به شکلی بنویسید که دقیقاً شبیه کد همگام به نظر برسد. با Async/Await می‌توانید از تمام قدرت Promise استفاده کنید بدون اینکه نیازی به زنجیره‌سازی then و catch داشته باشید. کلمه کلیدی async قبل از یک تابع قرار می‌گیرد و آن تابع را به یک Async Function تبدیل می‌کند. ویژگی اصلی یک Async Function این است که همیشه یک Promise برمی‌گرداند. حتی اگر مقدار ساده‌ای مانند یک عدد یا رشته return کنید، آن مقدار به صورت خودکار در یک Promise پیچیده می‌شود. async function getData() { return 42; } getData().then(function(value) { console.log(value); }); // خروجی: 42 کلمه کلیدی await فقط داخل یک Async Function قابل استفاده است (یا در سطح ماژول). await یک Promise دریافت می‌کند و اجرای تابع را تا زمانی که Promise settle شود، متوقف می‌کند. اگر Promise موفق شود، await مقدار Fulfilled را برمی‌گرداند و اگر خطایی رخ دهد، Exception پرتاب می‌کند. async function getUser() { let response = await fetch('/api/user'); let user = await response.json(); return user; } در این مثال، await باعث می‌شود خط دوم تا زمانی که fetch کامل شود اجرا نشود. این رفتار دقیقاً شبیه کد همگام است و خوانایی بسیار بالایی دارد. تفاوت اصلی بین then و await در نحوه نوشتن کد است. با then باید هر مرحله را در یک Callback جداگانه بنویسید، اما با await می‌توانید تمام مراحل را در یک تابع پشت سر هم بنویسید. این تفاوت زمانی اهمیت بیشتری پیدا می‌کند که نیاز به استفاده از مقادیر بین مراحل داشته باشید. با then باید از Closure استفاده کنید یا متغیرها را در scope بیرونی تعریف کنید، اما با await به سادگی از متغیرهای محلی استفاده می‌کنید. مثال مقایسه‌ای: با Promise و then: function processData() { return fetch('/api/data') .then(function(response) { return response.json(); }) .then(function(data) { let processed = data.items.filter(function(item) { return item.active; }); return fetch('/api/submit', { method: 'POST', body: JSON.stringify(processed) }); }) .then(function(response) { return response.json(); }); } با Async/Await: async function processData() { let response = await fetch('/api/data'); let data = await response.json(); let processed = data.items.filter(function(item) { return item.active; }); let submitResponse = await fetch('/api/submit', { method: 'POST', body: JSON.stringify(processed) }); let result = await submitResponse.json(); return result; } همان‌طور که می‌بینید، نسخه Async/Await بسیار خواناتر و تمیزتر است. اما مهم است بدانید که Async/Await در واقع syntactic sugar روی Promise است و زیر کاپوت همان مکانیزم Promise استفاده می‌شود. یک نکته مهم: await فقط Promise فعلی را بلاک می‌کند، نه کل Thread را. یعنی سایر عملیات جاوااسکریپت مانند Event Handler‌ها و Timer‌ها همچنان می‌توانند اجرا شوند. await به سادگی اجرای تابع async فعلی را تا زمان settle شدن Promise متوقف می‌کند و کنترل را به Event Loop برمی‌گرداند. همچنین از ES2022 می‌توانید از await در سطح ماژول یا Top-Level Await استفاده کنید. این یعنی لازم نیست حتماً await را داخل تابع async بنویسید. البته این قابلیت فقط در ماژول‌های ES کار می‌کند. let data = await fetch('/api/data'); let json = await data.json();

یکی از مهم‌ترین مباحث در کار با Async/Await، مدیریت خطا است. خوشبانه Async/Await از سینتکس آشنای try/catch پشتیبانی می‌کند که مدیریت خطا را بسیار ساده‌تر از then و catch می‌کند. وقتی داخل یک Async Function از await استفاده می‌کنید و Promise مربوطه Reject شود، یک Exception پرتاب می‌شود. می‌توانید این Exception را با بلوک try/catch مدیریت کنید. async function fetchUserData() { try { let response = await fetch('/api/user'); if (!response.ok) { throw new Error('خطای HTTP: ' + response.status); } let data = await response.json(); return data; } catch (error) { console.log('خطا در دریافت اطلاعات:', error.message); throw error; } } در این مثال، اگر fetch با خطا مواجه شود یا اگر وضعیت HTTP نشان‌دهنده خطا باشد، بلوک catch اجرا می‌شود. توجه کنید که throw error در انتهای catch باعث می‌شود خطا به فراخواننده تابع منتقل شود. اگر این throw را حذف کنید، خطا مصرف می‌شود و فراخواننده فکر می‌کند تابع با undefined موفق شده است. می‌توانید از finally هم در کنار try/catch استفاده کنید. بلوک finally صرف نظر از موفقیت یا شکست اجرا می‌شود و برای عملیات پاکسازی مناسب است. async function processOrder(orderId) { let connection = await getDbConnection(); try { let order = await connection.query('SELECT * FROM orders WHERE id = ?', [orderId]); await connection.query('UPDATE orders SET status = ? WHERE id = ?', ['processed', orderId]); return { success: true, order: order }; } catch (error) { await connection.query('UPDATE orders SET status = ? WHERE id = ?', ['failed', orderId]); return { success: false, error: error.message }; } finally { await connection.close(); } } یک رویکرد دیگر برای مدیریت خطا، استفاده از یک تابع Wrapper است. این رویکرد در بسیاری از فریمورک‌ها مانند Express.js رایج است. async function asyncHandler(fn) { return function(req, res, next) { fn(req, res, next).catch(next); }; } app.get('/api/users', asyncHandler(async function(req, res) { let users = await User.find(); res.json(users); })); با این Wrapper، اگر هر خطایی در تابع async رخ دهد، به صورت خودکار به Express Error Handler منتقل می‌شود. یک روش محبوب دیگر استفاده از الگوی try/catch با آرایه است. در این الگو، به جای استفاده از Exception، نتیجه را به صورت آرایه‌ای از خطا و داده برمی‌گردانیم. async function to(promise) { try { let result = await promise; return [null, result]; } catch (error) { return [error, null]; } } let [error, user] = await to(fetchUser()); if (error) { console.log('خطا:', error); return; } console.log('کاربر:', user); این الگو به ویژه در زبان Go رایج است و به شما کنترل بیشتری روی مدیریت خطا می‌دهد. همچنین از پرتاب Exception جلوگیری می‌کند که می‌تواند در برخی سناریوها مفید باشد. نکته مهم دیگر این است که اگر فراموش کنید await بنویسید، Promise Reject شده مدیریت نمی‌شود و به یک Unhandled Promise Rejection تبدیل می‌شود. این یکی از رایج‌ترین باگ‌ها در کد Async/Await است. async function badExample() { let response = fetch('/api/data'); // فراموش کردن await let data = response.json(); // خطا: response یک Promise است نه Response } همیشه مطمئن شوید که قبل از Promise‌ها از await استفاده کرده‌اید. در Node.js نسخه ۱۵ به بعد، Unhandled Promise Rejection باعث خاتمه پروسس می‌شود، بنابراین مدیریت صحیح خطاها بسیار حیاتی است.

تا اینجا یاد گرفتید که چگونه Promise‌ها را به صورت زنجیره‌ای اجرا کنید. اما گاهی نیاز دارید چند Promise را به صورت موازی یا Parallel اجرا کنید و منتظر بمانید تا همه آن‌ها تکمیل شوند. این دقیقاً کاری است که Promise.all انجام می‌دهد. Promise.all یک آرایه از Promise‌ها دریافت می‌کند و یک Promise جدید برمی‌گرداند. این Promise جدید زمانی Fulfilled می‌شود که تمام Promise‌های داخل آرایه Fulfilled شوند. مقدار نتیجه، آرایه‌ای از مقادیر Fulfilled شده به همان ترتیب آرایه ورودی است. async function fetchAllData() { let [user, posts, comments] = await Promise.all([ fetch('/api/user').then(function(r) { return r.json(); }), fetch('/api/posts').then(function(r) { return r.json(); }), fetch('/api/comments').then(function(r) { return r.json(); }) ]); console.log('کاربر:', user); console.log('پست‌ها:', posts); console.log('نظرات:', comments); } مزیت بزرگ Promise.all سرعت است. وقتی سه درخواست به صورت موازی ارسال شوند، زمان کل تقریباً برابر با کندترین درخواست خواهد بود. اما اگر همین سه درخواست را به صورت زنجیره‌ای با await انجام دهید، زمان کل برابر مجموع زمان سه درخواست خواهد بود. این تفاوت در برنامه‌های واقعی بسیار محسوس است. async function slowWay() { let user = await fetch('/api/user').then(function(r) { return r.json(); }); let posts = await fetch('/api/posts').then(function(r) { return r.json(); }); let comments = await fetch('/api/comments').then(function(r) { return r.json(); }); // زمان کل = زمان user + زمان posts + زمان comments } نکته بسیار مهم درباره Promise.all این است که اگر حتی یکی از Promise‌ها Reject شود، کل Promise.all بلافاصله Reject می‌شود. به این رفتار Fail-Fast می‌گویند. این یعنی اگر ۱۰ درخواست داشته باشید و یکی خطا دهد، نتیجه ۹ درخواست موفق هم از بین می‌رود. try { let results = await Promise.all([ fetch('/api/a'), fetch('/api/b'), fetch('/api/c') ]); } catch (error) { console.log('حداقل یک درخواست با خطا مواجه شد:', error); } این رفتار در برخی سناریوها مناسب نیست. مثلاً اگر بخواهید حتی در صورت خطا برخی درخواست‌ها، نتایج موفق را داشته باشید، باید از Promise.allSettled استفاده کنید که بعداً بررسی می‌کنیم. Promise.all کاربردهای زیادی دارد. مثلاً در بارگذاری همزمان چند منبع در صفحه، ارسال چند درخواست API به صورت موازی، و اجرای چند عملیات سنگین به صورت همزمان. یک الگوی رایج این است که Promise.all را با Promise‌های مدیریت‌شده ترکیب کنید تا از Fail-Fast جلوگیری کنید. async function fetchWithFallback(url, fallback) { try { let response = await fetch(url); return await response.json(); } catch (error) { return fallback; } } let results = await Promise.all([ fetchWithFallback('/api/a', {}), fetchWithFallback('/api/b', []), fetchWithFallback('/api/c', null) ]); با این روش، هر Promise به صورت جداگانه خطاها را مدیریت می‌کند و Promise.all هرگز Reject نمی‌شود.

Promise.race یکی دیگر از متدهای ترکیبی Promise است که آرایه‌ای از Promise‌ها دریافت می‌کند. برخلاف Promise.all که منتظر تمام Promise‌ها می‌ماند، Promise.race منتظر اولین Promise‌ای است که Settle شود. Settle شدن شامل هر دو حالت Fulfilled و Rejected می‌شود. اگر اولین Promise‌ای که Settle می‌شود Fulfilled باشد، Promise.race هم Fulfilled می‌شود و اگر Rejected باشد، Promise.race هم Rejected می‌شود. یکی از کاربردهای مهم Promise.race، پیاده‌سازی Timeout است. فرض کنید می‌خواهید اگر یک درخواست API بیش از ۵ ثانیه طول کشید، آن را لغو کنید. function fetchWithTimeout(url, timeout) { let fetchPromise = fetch(url); let timeoutPromise = new Promise(function(resolve, reject) { setTimeout(function() { reject(new Error('درخواست بیش از حد طول کشید')); }, timeout); }); return Promise.race([fetchPromise, timeoutPromise]); } fetchWithTimeout('/api/data', 5000) .then(function(response) { console.log('پاسخ دریافت شد'); }) .catch(function(error) { console.log('خطا:', error.message); }); در این مثال، اگر fetch قبل از ۵ ثانیه پاسخ دهد، Promise.race با نتیجه fetch موفق می‌شود. اما اگر ۵ ثانیه بگذرد و fetch هنوز کامل نشده باشد، timeoutPromise Reject می‌شود و Promise.race هم Reject می‌شود. کاربرد دیگر Promise.race، انتخاب سریع‌ترین منبع از چند منبع است. مثلاً می‌توانید درخواست را به چند CDN مختلف ارسال کنید و از پاسخ اولین CDN که پاسخ می‌دهد استفاده کنید. async function fetchFromFastestCDN(urls) { let promises = urls.map(function(url) { return fetch(url).then(function(r) { return r.json(); }); }); return Promise.race(promises); } fetchFromFastestCDN([ 'https://cdn1.example.com/data', 'https://cdn2.example.com/data', 'https://cdn3.example.com/data' ]).then(function(data) { console.log('داده از سریع‌ترین CDN:', data); }); نکته مهم این است که Promise.race فقط به اولین Settle شدن توجه می‌کند. Promise‌های باقی‌مانده همچنان اجرا می‌شوند ولی نتیجه آن‌ها نادیده گرفته می‌شود. این یعنی اگر می‌خواهید منابع آن‌ها را آزاد کنید، باید خودتان این کار را انجام دهید. یک مشکل رایج با Promise.race این است که Promise‌هایی که بازنده شده‌اند یا Loose می‌شوند همچنان در حافظه باقی می‌مانند. اگر از fetch استفاده می‌کنید، می‌توانید از AbortController برای لغو درخواست‌های باقی‌مانده استفاده کنید. let controller = new AbortController(); let signal = controller.signal; Promise.race([ fetch('/api/slow', { signal: signal }), new Promise(function(_, reject) { setTimeout(function() { controller.abort(); reject(new Error('Timeout')); }, 5000); }) ]); Promise.race با Async/Await هم قابل استفاده است و می‌تواند کد شما را بسیار قدرتمندتر کند. فقط به یاد داشته باشید که همیشه خطای Reject شدن اولین Promise را هم در نظر بگیرید.

Promise.allSettled در ES2020 معرفی شد و یکی از مفیدترین متدهای ترکیبی Promise است. این متد مانند Promise.all یک آرایه از Promise‌ها دریافت می‌کند، اما تفاوت مهم این است که منتظر می‌ماند تا تمام Promise‌ها Settle شوند، صرف نظر از اینکه Fulfilled شده باشند یا Rejected. نتیجه Promise.allSettled همیشه Fulfilled است و مقدار آن آرایه‌ای از آبجکت‌ها است که وضعیت هر Promise را نشان می‌دهد. هر آبجکت دو فیلد دارد: status و value یا reason. اگر Promise Fulfilled شده باشد، status برابر fulfilled و value برابر مقدار Fulfilled خواهد بود. اگر Promise Rejected شده باشد، status برابر rejected و reason برابر دلیل Rejection خواهد بود. let results = await Promise.allSettled([ fetch('/api/user').then(function(r) { return r.json(); }), fetch('/api/broken-endpoint').then(function(r) { return r.json(); }), fetch('/api/posts').then(function(r) { return r.json(); }) ]); results.forEach(function(result, index) { if (result.status === 'fulfilled') { console.log('درخواست ' + index + ' موفق:', result.value); } else { console.log('درخواست ' + index + ' ناموفق:', result.reason); } }); این متد زمانی بسیار مفید است که شکست یک درخواست نباید مانع سایر درخواست‌ها شود. مثلاً در یک داشبورد که چند ویجت دارد، اگر یک ویجت خطا دهد، سایر ویجت‌ها باید به درستی نمایش داده شوند. async function loadDashboard() { let [usersResult, ordersResult, statsResult] = await Promise.allSettled([ fetch('/api/users').then(function(r) { return r.json(); }), fetch('/api/orders').then(function(r) { return r.json(); }), fetch('/api/stats').then(function(r) { return r.json(); }) ]); let dashboard = {}; if (usersResult.status === 'fulfilled') { dashboard.users = usersResult.value; } else { dashboard.usersError = 'خطا در بارگذاری کاربران'; } if (ordersResult.status === 'fulfilled') { dashboard.orders = ordersResult.value; } else { dashboard.ordersError = 'خطا در بارگذاری سفارشات'; } if (statsResult.status === 'fulfilled') { dashboard.stats = statsResult.value; } else { dashboard.statsError = 'خطا در بارگذاری آمار'; } return dashboard; } تفاوت کلیدی Promise.all و Promise.allSettled در مدیریت خطا است. Promise.all با Fail-Fast عمل می‌کند: اگر یک Promise شکست بخورد، کل مجموعه شکست می‌خورد. Promise.allSettled صبر می‌کند تا همه Promise‌ها تمام شوند و سپس نتیجه همه را گزارش می‌کند. در انتخاب بین این دو، باید به منطق کسب‌وکار خود توجه کنید. اگر شکست یکی از Promise‌ها بحرانی است و بقیه بدون آن بی‌معنی هستند، از Promise.all استفاده کنید. اگر هر Promise مستقل است و می‌خواهید نتیجه همه را بدانید، از Promise.allSettled استفاده کنید. Promise.allSettled همچنین در سناریوهای Batch Processing مفید است. مثلاً اگر بخواهید ۱۰۰ کاربر را به‌روزرسانی کنید و بعد گزارش بگیرید که چند نفر موفق و چند نفر ناموفق بودند. let updateResults = await Promise.allSettled( users.map(function(user) { return updateUser(user.id, user.data); }) ); let succeeded = updateResults.filter(function(r) { return r.status === 'fulfilled'; }).length; let failed = updateResults.filter(function(r) { return r.status === 'rejected'; }).length; console.log(succeeded + ' موفق، ' + failed + ' ناموفق');

Promise.any در ES2021 معرفی شد و مکمل Promise.race است. تفاوت مهم این است که Promise.any منتظر اولین Promise موفق یا Fulfilled است. اگر اولین Promise‌ای که Settle می‌شود Rejected باشد، Promise.any نادیده‌اش می‌گیرد و منتظر Promise بعدی می‌ماند. Promise.any فقط زمانی Reject می‌شود که تمام Promise‌های آرایه Reject شوند. در این حالت، یک AggregateError پرتاب می‌شود که شامل تمام خطاهای رخ داده است. let result = await Promise.any([ fetch('/api/cdn1/data'), fetch('/api/cdn2/data'), fetch('/api/cdn3/data') ]); console.log('پاسخ از اولین CDN موفق:', result); کاربرد اصلی Promise.any زمانی است که چند منبع دارید و می‌خواهید از اولین منبع موفق استفاده کنید. مثلاً اگر چند آینه یا Mirror برای دانلود یک فایل دارید، می‌توانید به همه آن‌ها درخواست بفرستید و از اولین پاسخ موفق استفاده کنید. try { let fastestResult = await Promise.any([ fetchFromServer1('/api/data'), fetchFromServer2('/api/data'), fetchFromServer3('/api/data') ]); let data = await fastestResult.json(); console.log('داده دریافت شد:', data); } catch (error) { if (error instanceof AggregateError) { console.log('تمام سرورها با خطا مواجه شدند'); console.log('تعداد خطاها:', error.errors.length); error.errors.forEach(function(err, i) { console.log('خطای سرور ' + (i + 1) + ':', err.message); }); } } تفاوت Promise.any با Promise.race بسیار مهم است. Promise.race به اولین Settle شدن توجه می‌کند، چه Fulfilled باشد چه Rejected. یعنی اگر اولین Promise Reject شود، Promise.race هم Reject می‌شود. اما Promise.any فقط به اولین Fulfilled شدن توجه می‌کند و Rejection‌های اولیه را نادیده می‌گیرد. این تفاوت در انتخاب ابزار مناسب بسیار مهم است. اگر Timeout دارید و می‌خواهید در صورت Timeout خطا بدهید، از Promise.race استفاده کنید. اگر چند منبع دارید و می‌خواهید سریع‌ترین منبع موفق را بگیرید، از Promise.any استفاده کنید. Promise.any همچنین در پیاده‌سازی Fallback Pattern بسیار مفید است. مثلاً ابتدا از API اصلی تلاش کنید، اگر نبود از API پشتیبان استفاده کنید. async function getDataWithFallback() { return Promise.any([ fetchPrimaryAPI().then(function(r) { return r.json(); }), fetchBackupAPI().then(function(r) { return r.json(); }), getFromLocalStorage() ]); } یک نکته عملی: Promise.any در مرورگرهای قدیمی‌تر ممکن است پشتیبانی نشود. اگر نیاز به پشتیبانی از مرورگرهای قدیمی دارید، می‌توانید از polyfill استفاده کنید یا خودتان آن را پیاده‌سازی کنید. پیاده‌سازی ساده: function promiseAny(promises) { return new Promise(function(resolve, reject) { let errors = []; let rejectedCount = 0; promises.forEach(function(promise, index) { Promise.resolve(promise).then(resolve).catch(function(error) { errors[index] = error; rejectedCount++; if (rejectedCount === promises.length) { reject(new AggregateError(errors, 'تمام Promise‌ها با خطا مواجه شدند')); } }); }); }); }

حالا که تمام مفاهیم Promise و Async/Await را یاد گرفتید، بیایید ببینیم چگونه در پروژه‌های واقعی از این دانش استفاده کنیم. مدیریت درخواست‌های API یکی از رایج‌ترین کاربردهای Async/Await است. اولین قدم، ساخت یک سرویس HTTP قابل استفاده مجدد است. به جای نوشتن fetch در هر جای پروژه، بهتر است یک سرویس مرکزی بسازید. async function apiClient(url, options) { let defaultOptions = { headers: { 'Content-Type': 'application/json' }, ...options }; try { let response = await fetch(url, defaultOptions); if (!response.ok) { let errorData = await response.json().catch(function() { return {}; }); throw new ApiError(response.status, errorData.message || 'خطای سرور', errorData); } return await response.json(); } catch (error) { if (error instanceof ApiError) { throw error; } throw new ApiError(0, 'خطای شبکه', error); } } class ApiError extends Error { constructor(status, message, data) { super(message); this.status = status; this.data = data; } } با این سرویس، هر درخواست API به صورت تمیز و با مدیریت خطای مناسب انجام می‌شود. let users = await apiClient('/api/users'); let user = await apiClient('/api/users/123'); دومین قدم، مدیریت وضعیت بارگذاری در رابط کاربری است. در فریمورک‌هایی مانند React، معمولاً سه وضعیت دارید: loading، data و error. function useApi(url) { let [state, setState] = useState({ data: null, loading: true, error: null }); useEffect(function() { let cancelled = false; async function fetchData() { try { setState({ data: null, loading: true, error: null }); let data = await apiClient(url); if (!cancelled) { setState({ data: data, loading: false, error: null }); } } catch (error) { if (!cancelled) { setState({ data: null, loading: false, error: error }); } } } fetchData(); return function() { cancelled = true; }; }, [url]); return state; } توجه کنید که متغیر cancelled جلوی به‌روزرسانی State پس از Unmount شدن کامپوننت را می‌گیرد. این یکی از مهم‌ترین نکات در مدیریت درخواست‌های ناهمگام در React است. سومین قدم، Retry Logic است. در دنیای واقعی، درخواست‌های API گاهی به دلایل موقتی مانند نوسان شبکه شکست می‌خورند. اضافه کردن منطق Retry می‌تواند تجربه کاربر را بهبود دهد. async function fetchWithRetry(url, options, maxRetries) { maxRetries = maxRetries || 3; let lastError; for (let i = 0; i < maxRetries; i++) { try { return await apiClient(url, options); } catch (error) { lastError = error; if (error.status >= 400 && error.status < 500) { throw error; } if (i < maxRetries - 1) { let delay = Math.pow(2, i) * 1000; await new Promise(function(resolve) { setTimeout(resolve, delay); }); } } } throw lastError; } در این مثال، الگوی Exponential Backoff استفاده شده است. یعنی بین هر تلاش، زمان انتظار دو برابر می‌شود. این الگو از فشار بیش از حد روی سرور جلوگیری می‌کند. چهارمین قدم، Caching است. برای جلوگیری از ارسال درخواست‌های تکراری، می‌توانید یک سیستم کش ساده پیاده‌سازی کنید. let cache = new Map(); async function fetchWithCache(url, ttl) { ttl = ttl || 60000; if (cache.has(url)) { let cached = cache.get(url); if (Date.now() - cached.timestamp < ttl) { return cached.data; } } let data = await apiClient(url); cache.set(url, { data: data, timestamp: Date.now() }); return data; } پنجمین قدم، مدیریت Request Cancellation است. وقتی کاربر قبل از دریافت پاسخ، صفحه را ترک می‌کند یا درخواست جدیدی ارسال می‌کند، باید درخواست قبلی لغو شود. let currentController = null; async function fetchCancellable(url) { if (currentController) { currentController.abort(); } currentController = new AbortController(); try { let response = await fetch(url, { signal: currentController.signal }); return await response.json(); } catch (error) { if (error.name === 'AbortError') { console.log('درخواست لغو شد'); return null; } throw error; } } این الگوها در کنار هم یک سیستم مدیریت API قدرتمند و حرفه‌ای می‌سازند که می‌تواند در پروژه‌های واقعی استفاده شود.

حتی توسعه‌دهندگان باتجربه هم گاهی اشتباهاتی در استفاده از Promise و Async/Await مرتکب می‌شوند. شناخت این اشتباهات به شما کمک می‌کند از آن‌ها اجتناب کنید. اشتباه اول: فراموش کردن return در زنجیره then. این شاید رایج‌ترین اشتباه باشد. وقتی درون then مقداری را return نمی‌کنید، then بعدی undefined دریافت می‌کند. اشتباه: fetch('/api/user').then(function(response) { response.json(); }).then(function(data) { console.log(data); }); // data برابر undefined است درست: fetch('/api/user').then(function(response) { return response.json(); }).then(function(data) { console.log(data); }); // data برابر آبجکت JSON است اشتباه دوم: فراموش کردن await. اگر قبل از یک Promise از await استفاده نکنید، متغیر شما Promise خواهد بود نه مقدار نهایی. async function bad() { let response = fetch('/api/data'); console.log(response); // [object Promise] نه داده واقعی } async function good() { let response = await fetch('/api/data'); console.log(response); // Response واقعی } اشتباه سوم: استفاده از await در حلقه for به جای Promise.all. این اشتباه باعث اجرای سریالی درخواست‌ها و کاهش شدید سرعت می‌شود. async function slow() { let urls = ['/api/a', '/api/b', '/api/c']; let results = []; for (let i = 0; i < urls.length; i++) { let response = await fetch(urls[i]); let data = await response.json(); results.push(data); } return results; // هر درخواست بعد از قبلی اجرا می‌شود } async function fast() { let urls = ['/api/a', '/api/b', '/api/c']; let promises = urls.map(function(url) { return fetch(url).then(function(r) { return r.json(); }); }); return Promise.all(promises); // همه درخواست‌ها همزمان اجرا می‌شوند } اشتباه چهارم: عدم مدیریت خطا در Async Function. اگر یک Async Function بدون try/catch یا catch استفاده شود، خطاهای آن Unhandled Promise Rejection می‌شوند. async function risky() { let data = await fetch('/api/data'); return data.json(); } risky(); // خطا مدیریت نمی‌شود! بهتر: risky().catch(function(error) { console.error('خطا:', error); }); اشتباه پنجم: استفاده از new Promise غیرضروری. بسیاری از API‌های مدرن خودشان Promise برمی‌گردانند و نیازی به پیچیدن آن‌ها در new Promise نیست. غیرضروری: function getData() { return new Promise(function(resolve, reject) { fetch('/api/data') .then(function(response) { return response.json(); }) .then(resolve) .catch(reject); }); } درست: function getData() { return fetch('/api/data').then(function(response) { return response.json(); }); } این الگوی Anti-Pattern به Promise Constructor Anti-Pattern معروف است و باید از آن اجتناب کنید. اشتباه ششم: استفاده نادرست از Promise.all با Promise‌های مستقل. اگر Promise‌های شما مستقل هستند و نیازی به نتیجه همه آن‌ها ندارید، استفاده از Promise.all می‌تواند باعث شود خطا یکی، بقیه را هم تحت تأثیر قرار دهد. اشتباه هفتم: فراموش کردن مدیریت AbortController. وقتی از fetch با AbortController استفاده می‌کنید و abort می‌زنید، fetch یک خطا پرتاب می‌کند که باید آن را مدیریت کنید. اشتباه هشتم: عدم استفاده از finally برای پاکسازی. اگر منابعی مانند اتصال دیتابیس یا فایل باز کرده‌اید، همیشه در finally آن‌ها را ببندید.

پس از شناخت اشتباهات رایج، بیایید بهترین روش‌ها را بررسی کنیم که رعایت آن‌ها کد شما را حرفه‌ای‌تر و قابل اعتمادتر می‌کند. قانون اول: همیشه خطاها را مدیریت کنید. هر Promise‌ای ممکن است Reject شود و هر await‌ای ممکن است Exception پرتاب کند. بدون مدیریت خطا، برنامه شما در شرایط غیرمنتظره رفتار نامشخص خواهد داشت. قانون دوم: از Async/Await برای خوانایی بیشتر استفاده کنید. وقتی منطق پیچیده‌ای دارید که نیاز به استفاده از مقادیر بین مراحل دارد، Async/Await بسیار خواناتر از then زنجیره‌ای است. اما اگر فقط می‌خواهید نتیجه یک Promise را به Promise دیگر پاس دهید، then ممکن است مناسب‌تر باشد. قانون سوم: از Promise.all برای عملیات موازی استفاده کنید. هر وقت چند عملیات ناهمگام مستقل دارید، آن‌ها را با Promise.all به صورت موازی اجرا کنید. این کار سرعت برنامه را به طور چشمگیری افزایش می‌دهد. قانون چهارم: از Promise.allSettled برای عملیات مستقل با مدیریت خطای جداگانه استفاده کنید. اگر شکست یکی نباید بقیه را تحت تأثیر قرار دهد، Promise.allSettled انتخاب بهتری است. قانون پنجم: از Promise.any برای الگوی Fallback استفاده کنید. وقتی چند منبع دارید و می‌خواهید از اولین منبع موفق استفاده کنید، Promise.any بهترین انتخاب است. قانون ششم: از AbortController برای لغو درخواست‌ها استفاده کنید. این کار از مصرف بی‌رویه منابع جلوگیری می‌کند و تجربه کاربر را بهبود می‌بخشد. قانون هفتم: از تابع‌های Async به عنوان IIFE استفاده نکنید. به جای آن، تابع Async را تعریف کنید و سپس فراخوانی کنید. بد: (async function() { await someAsyncTask(); })(); خوب: async function init() { await someAsyncTask(); } init(); قانون هشتم: همیشه مقادیر بازگشتی Async Function را در نظر بگیرید. یادتان باشد Async Function همیشه Promise برمی‌گرداند. فراخواننده باید از then یا await استفاده کند. قانون نهم: از Concurrency Limit برای کنترل تعداد درخواست‌های همزمان استفاده کنید. اگر ۱۰۰۰ درخواست API دارید، ارسال همه آن‌ها به صورت همزمان ممکن است سرور را از کار بیندازد. async function processInBatches(items, batchSize, processor) { let results = []; for (let i = 0; i < items.length; i += batchSize) { let batch = items.slice(i, i + batchSize); let batchResults = await Promise.all(batch.map(processor)); results = results.concat(batchResults); } return results; } قانون دهم: از finally برای پاکسازی منابع استفاده کنید. اتصالات دیتابیس، فایل‌های باز و تایمرها باید همیشه در finally بسته شوند. قانون یازدهم: از UnhandledRejection Event در Node.js استفاده کنید. این Event به شما اطلاع می‌دهد که Promise Rejection‌ای مدیریت نشده است. process.on('unhandledRejection', function(reason, promise) { console.error('Unhandled Rejection:', reason); }); قانون دوازدهم: از Promise.resolve و Promise.reject برای ساخت Promise فوری استفاده کنید. این کار در تابع‌هایی مفید است که گاهی نتیجه فوری و گاهی نتیجه ناهمگام برمی‌گردانند. async function getUser(id) { let cached = cache.get(id); if (cached) { return cached; } let user = await fetchUser(id); cache.set(id, user); return user; }

درک عملکرد Promise و Async/Await برای نوشتن کد بهینه بسیار مهم است. بیایید جنبه‌های مختلف عملکرد را بررسی کنیم. اول، تفاوت اجرای سریالی و موازی. وقتی از await پشت سر هم استفاده می‌کنید، هر Promise بعد از اتمام Promise قبلی شروع می‌شود. این رفتار سریالی یا Sequential است. اما اگر Promise‌ها مستقل هستند، باید آن‌ها را به صورت موازی اجرا کنید. مقایسه زمان اجرا: فرض کنید هر درخواست API یک ثانیه طول می‌کشد. با اجرای سریالی سه درخواست: زمان کل = ۳ ثانیه. با Promise.all و اجرای موازی: زمان کل = ۱ ثانیه. این تفاوت ۳ برابری در پروژه‌های واقعی بسیار محسوس است. دوم، هزینه ساخت Promise. ساخت یک Promise هزینه بسیار کمی دارد. Microtask Queue مسئول اجرای Callback‌های Promise است و این عملیات بسیار سریع‌تر از I/O واقعی است. پس نگران تعداد Promise‌ها نباشید، نگران عملیات I/O باشید. سوم، تفاوت Event Loop و Bloک شدن. await کل Thread را بلاک نمی‌کند. وقتی await اجرا می‌شود، کنترل به Event Loop برمی‌گردد و سایر Task‌ها می‌توانند اجرا شوند. این رفتار باعث می‌شود رابط کاربری حتی در حین انتظار پاسخ سرور، پاسخگو باقی بماند. چهارم، مصرف حافظه. Promise‌ها تا زمانی که Garbage Collector آن‌ها را پاکسازی کند، در حافظه باقی می‌مانند. اگر Promise‌ای به صورت حلقه‌ای یا Circular Reference به سایر اشیا متصل باشد، ممکن است حافظه نشت کند. پنجم، Microtask vs Macrotask. Callback‌های then و catch و finally به عنوان Microtask اجرا می‌شوند. Microtask‌ها قبل از Macrotask‌های بعدی (مانند setTimeout) اجرا می‌شوند. این یعنی Promise‌ها اولویت بالاتری نسبت به Timer‌ها دارند. setTimeout(function() { console.log('1: setTimeout'); }, 0); Promise.resolve().then(function() { console.log('2: Promise'); }); console.log('3: sync'); خروجی: 3: sync, 2: Promise, 1: setTimeout ششم، بررسی Memory Leak در حلقه‌های ناهمگام. اگر در یک حلقه بی‌نهایت از await استفاده می‌کنید، مطمئن شوید که منابع به درستی مدیریت می‌شوند. async function polling() { while (true) { try { let data = await fetchData(); updateUI(data); } catch (error) { handleError(error); } await new Promise(function(resolve) { setTimeout(resolve, 5000); }); } } در این مثال، اگر updateUI باعث ایجاد Closure‌های بزرگ شود، حافظه به مرور زمان پر می‌شود. هفتم، بهینه‌سازی با Promise.allSettled به جای Promise.all در سناریوهایی که Fail-Fast نیاز نیست. Promise.allSettled تضمین می‌کند که تمام Promise‌ها اجرا شوند و این می‌تواند در سناریوهای Batch Processing مفید باشد. هشتم، استفاده از Lazy Evaluation با تابع‌های Factory. به جای ساخت Promise بلافاصله، می‌توانید از تابعی استفاده کنید که Promise را در زمان نیاز بسازد. function createLazyFetcher(url) { return function() { return fetch(url); }; } let fetchers = urls.map(createLazyFetcher); let results = await Promise.all(fetchers.map(function(f) { return f(); })); نهم، Worker Thread در Node.js برای عملیات CPU-bound. Promise و Async/Await برای عملیات I/O-bound مناسب هستند. اگر عملیات CPU-intensive دارید، از Worker Thread یا Cluster استفاده کنید.

بیایید چند سناریوی واقعی را بررسی کنیم که Promise و Async/Await در آن‌ها نقش کلیدی دارند. سناریو اول: سیستم احراز هویت. در یک اپلیکیشن واقعی، وقتی کاربر وارد می‌شود، باید ابتدا اطلاعات ورود را به سرور بفرستید، سپس Token دریافت کنید، بعد اطلاعات کاربر را بگیرید و در نهایت تنظیمات کاربر را بارگذاری کنید. async function login(email, password) { try { let tokenResponse = await fetch('/api/auth/login', { method: 'POST', body: JSON.stringify({ email: email, password: password }) }); if (!tokenResponse.ok) { throw new Error('نام کاربری یا رمز عبور اشتباه است'); } let tokenData = await tokenResponse.json(); localStorage.setItem('token', tokenData.token); let [user, settings] = await Promise.all([ fetch('/api/user/profile', { headers: { Authorization: 'Bearer ' + tokenData.token } }).then(function(r) { return r.json(); }), fetch('/api/user/settings', { headers: { Authorization: 'Bearer ' + tokenData.token } }).then(function(r) { return r.json(); }) ]); return { user: user, settings: settings }; } catch (error) { console.error('خطا در ورود:', error.message); throw error; } } توجه کنید که دریافت پروفایل و تنظیمات به صورت موازی انجام می‌شود چون به هم وابسته نیستند. سناریو دوم: بارگذاری صفحه داشبورد. یک داشبورد معمولاً شامل چند بخش است که هر کدام داده‌های خود را از API می‌گیرند. async function loadDashboard() { let results = await Promise.allSettled([ fetch('/api/stats/revenue').then(function(r) { return r.json(); }), fetch('/api/stats/users').then(function(r) { return r.json(); }), fetch('/api/stats/orders').then(function(r) { return r.json(); }), fetch('/api/notifications').then(function(r) { return r.json(); }) ]); return { revenue: results[0].status === 'fulfilled' ? results[0].value : null, users: results[1].status === 'fulfilled' ? results[1].value : null, orders: results[2].status === 'fulfilled' ? results[2].value : null, notifications: results[3].status === 'fulfilled' ? results[3].value : [] }; } سناریو سوم: آپلود فایل با نشانگر پیشرفت. async function uploadFile(file, onProgress) { let formData = new FormData(); formData.append('file', file); return new Promise(function(resolve, reject) { let xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', function(event) { if (event.lengthComputable) { let percent = Math.round((event.loaded / event.total) * 100); onProgress(percent); } }); xhr.addEventListener('load', function() { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error('خطا در آپلود: ' + xhr.status)); } }); xhr.addEventListener('error', function() { reject(new Error('خطای شبکه')); }); xhr.open('POST', '/api/upload'); xhr.send(formData); }); } سناریو چهارم: صف پردازش یا Processing Queue. async function processQueue(tasks, concurrency) { let running = 0; let index = 0; let results = []; return new Promise(function(resolve) { function next() { while (running < concurrency && index < tasks.length) { let currentIndex = index; index++; running++; tasks[currentIndex]().then(function(result) { results[currentIndex] = result; running--; if (running === 0 && index >= tasks.length) { resolve(results); } else { next(); } }); } } next(); }); } سناریو پنجم: Polling با توقف شرطی. async function pollUntilReady(url, interval, maxAttempts) { for (let i = 0; i < maxAttempts; i++) { let response = await fetch(url); let data = await response.json(); if (data.status === 'ready') { return data; } await new Promise(function(resolve) { setTimeout(resolve, interval); }); } throw new Error('عملیات پس از ' + maxAttempts + ' تلاش تکمیل نشد'); } این سناریوها نشان می‌دهند Promise و Async/Await در انواع مختلف پروژه‌ها از فرانت‌اند تا بک‌اند کاربرد دارند.

درک تفاوت بین چهار متد ترکیبی Promise بسیار مهم است. بیایید آن‌ها را با یک مثال واحد مقایسه کنیم. فرض کنید سه Promise دارید: یکی پس از ۱ ثانیه موفق می‌شود با مقدار A، دومی پس از ۲ ثانیه خطا می‌دهد با دلیل B، سومی پس از ۳ ثانیه موفق می‌شود با مقدار C. Promise.all: پس از اولین Rejection (Promise دوم پس از ۲ ثانیه)، بلافاصله Reject می‌شود. Promise.all Fail-Fast است. نتیجه: Rejection با دلیل B. مهم: حتی Promise اول که موفق شده بود و Promise سوم که هنوز در حال اجراست، نادیده گرفته می‌شوند. Promise.allSettled: منتظر می‌ماند تا هر سه Promise Settle شوند (۳ ثانیه). نتیجه: آرایه‌ای از سه آبجکت: {status: fulfilled, value: A}، {status: rejected, reason: B}، {status: fulfilled, value: C}. Promise.allSettled هرگز Reject نمی‌شود. Promise.race: منتظر اولین Settle شدن است. Promise اول پس از ۱ ثانیه Fulfilled می‌شود. نتیجه: Fulfilled با مقدار A. اما اگر Promise اول Rejected بود، Promise.race هم Rejected می‌شد. Promise.any: منتظر اولین Fulfilled شدن است. Promise اول پس از ۱ ثانیه Fulfilled می‌شود. نتیجه: Fulfilled با مقدار A. تفاوت با Promise.race: اگر Promise اول Rejected بود، Promise.any نادیده‌اش می‌گرفت و منتظر Promise سوم می‌ماند. حال بیایید یک جدول مقایسه‌ای بسازیم: Promise.all: منتظر همه، Fail-Fast، مناسب وقتی همه باید موفق باشند. Promise.allSettled: منتظر همه، هرگز Fail نمی‌کند، مناسب وقتی نتیجه همه مهم است. Promise.race: منتظر اولین Settle، مناسب برای Timeout. Promise.any: منتظر اولین Fulfilled، مناسب برای Fallback. برای درک بهتر، بیایید مثال‌های کاربردی ببینیم. مثال Promise.all: let [user, friends, posts] = await Promise.all([ fetchUser(id), fetchFriends(id), fetchPosts(id) ]); اگر هر کدام خطا دهد، کل صفحه باید خطا نشان دهد. منطقی است که از Promise.all استفاده کنیم. مثال Promise.allSettled: let results = await Promise.allSettled( emails.map(function(email) { return sendEmail(email); }) ); let sent = results.filter(function(r) { return r.status === 'fulfilled'; }).length; let failed = results.filter(function(r) { return r.status === 'rejected'; }); console.log(sent + ' ایمیل ارسال شد'); console.log(failed.length + ' ایمیل ارسال نشد'); مثال Promise.race: let result = await Promise.race([ fetchFromPrimaryServer(), timeoutAfter(5000) ]); مثال Promise.any: let page = await Promise.any([ fetchFromCDN1('/page.html'), fetchFromCDN2('/page.html'), fetchFromOrigin('/page.html') ]); انتخاب متد مناسب بستگی به سناریوی شما دارد. همیشه از خود بپرسید: آیا شکست یکی باید کل مجموعه را متوقف کند؟ آیا به نتیجه همه نیاز دارم یا فقط اولین موفق؟ آیا Timeout نیاز دارم؟ پاسخ این سوالات متد مناسب را مشخص می‌کند.

Promise و Async/Await از پرتکرارترین موضوعات مصاحبه فنی جاوااسکریپت هستند. بیایید مهم‌ترین سوالات و پاسخ‌هایشان را بررسی کنیم. سوال اول: تفاوت Callback و Promise چیست؟ پاسخ: Callback یک تابع است که به عنوان آرگومان به تابع دیگری پاس داده می‌شود و پس از اتمام عملیات ناهمگام فراخوانی می‌شود. Promise یک شیء است که نمایانگر نتیجه نهایی یک عملیات ناهمگام است. Promise‌ها زنجیره‌سازی راحت‌تر، مدیریت خطای بهتر و خوانایی بالاتری نسبت به Callback دارند. سوال دوم: تفاوت Async/Await و Promise.then چیست؟ پاسخ: Async/Await syntactic sugar روی Promise است و تفاوت عملکردی ندارد. تفاوت در خوانایی و نحوه نوشتن کد است. Async/Await کد ناهمگام را شبیه کد همگام می‌کند و خوانایی بالاتری دارد، به خصوص وقتی منطق پیچیده باشد. سوال سوم: خروجی این کد چیست؟ console.log('1'); setTimeout(function() { console.log('2'); }, 0); Promise.resolve().then(function() { console.log('3'); }); console.log('4'); پاسخ: خروجی 1، 4، 3، 2 است. دلیل: console.log های همگام اول اجرا می‌شوند (1 و 4). سپس Microtask‌ها (Promise: 3) و در نهایت Macrotask‌ها (setTimeout: 2) اجرا می‌شوند. سوال چهارم: Promise.all و Promise.allSettled چه تفاوتی دارند؟ پاسخ: Promise.all Fail-Fast است: اگر یک Promise Reject شود، کل مجموعه Reject می‌شود. Promise.allSettled منتظر تمام Promise‌ها می‌ماند و همیشه Fulfilled می‌شود با آرایه‌ای از نتایج. سوال پنجم: چگونه یک Promise را لغو کنیم؟ پاسخ: Promise ذاتاً قابل لغو نیست. اما می‌توان از AbortController برای لغو fetch و از Race Pattern برای Timeout استفاده کرد. سوال ششم: خروجی این کد چیست؟ async function foo() { console.log('A'); await Promise.resolve(); console.log('B'); } console.log('C'); foo(); console.log('D'); پاسخ: خروجی C، A، D، B است. foo() بلافاصله شروع می‌شود و A را چاپ می‌کند. سپس await کنترل را برمی‌گرداند و D چاپ می‌شود. در نهایت Microtask Promise resolve می‌شود و B چاپ می‌شود. سوال هفتم: تفاوت Promise.race و Promise.any چیست؟ پاسخ: Promise.race به اولین Settle (چه Fulfilled چه Rejected) واکنش نشان می‌دهد. Promise.any فقط به اولین Fulfilled واکنش نشان می‌دهد و Rejection‌های اولیه را نادیده می‌گیرد. سوال هشتم: چرا در حلقه for نباید از await استفاده کنیم؟ پاسخ: اگر Promise‌ها مستقل هستند، استفاده از await در حلقه باعث اجرای سریالی می‌شود. باید از Promise.all برای اجرای موازی استفاده کنیم. اما اگر هر تکرار به نتیجه تکرار قبلی وابسته باشد، await در حلقه ضروری است. سوال نهم: چگونه multiple catch بنویسیم؟ پاسخ: می‌توانید در یک زنجیره Promise چند catch داشته باشید. catch اول خطاها را از بالادست مدیریت می‌کند. اگر catch خطا پرتاب کند، catch بعدی آن را مدیریت می‌کند. fetch('/api') .then(handler) .catch(function(e) { return retry(); }) .then(handler) .catch(function(e) { logToServer(e); }); سوال دهم: Promise.resolve و Promise.reject چه کاری انجام می‌دهند؟ پاسخ: Promise.resolve(value) یک Promise فوری Fulfilled با مقدار مشخص می‌سازد. Promise.reject(reason) یک Promise فوری Rejected با دلیل مشخص می‌سازد. اگر value خودش Promise باشد، Promise.resolve همان Promise را برمی‌گرداند.

در این مقاله جامع، سفری از Callback Hell تا Async/Await را طی کردیم. بیایید آنچه یاد گرفتیم مرور کنیم. ابتدا مشکل Callback Hell را شناختیم: کد تو در تو، غیرقابل خواندن، سخت در اشکال‌زدایی و دشوار در مدیریت خطا. سپس Promise را به عنوان راه‌حل این مشکل بررسی کردیم. Promise یک شیء است که نتیجه یک عملیات ناهمگام را نمایندگی می‌کند و سه حالت Pending، Fulfilled و Rejected دارد. متد‌های then، catch و finally را برای واکنش به نتایج Promise یاد گرفتیم و فهمیدیم که زنجیره‌سازی then‌ها مشکل Callback Hell را حل می‌کند. سپس Async/Await را معرفی کردیم که نحوه نوشتن کد ناهمگام را به سطح جدیدی از خوانایی رساند. با async و await، کد ناهمگام دقیقاً شبیه کد همگام می‌شود و مدیریت خطا با try/catch بسیار ساده‌تر است. چهار متد ترکیبی Promise را به طور کامل بررسی کردیم: Promise.all برای اجرای موازی با Fail-Fast، Promise.allSettled برای اجرای موازی با انتظار کامل، Promise.race برای دریافت اولین نتیجه Settle شده و Promise.any برای دریافت اولین نتیجه موفق. بهترین روش مدیریت درخواست‌های API را با ساخت سرویس HTTP مرکزی، مدیریت وضعیت بارگذاری، Retry Logic، Caching و Request Cancellation یاد گرفتیم. اشتباهات رایج مانند فراموش کردن return، فراموش کردن await، استفاده نادرست از await در حلقه و Promise Constructor Anti-Pattern را شناختیم. سوالات مصاحبه مهم و پاسخ‌هایشان را مرور کردیم. حالا که این مفاهیم را درک کرده‌اید، چند پیشنهاد برای ادامه مسیر یادگیری دارم: اول، Async Iteration و for-await-of را یاد بگیرید. این قابلیت به شما اجازه می‌دهد روی آبجکت‌های Async Iterable مانند Stream‌ها حلقه بزنید. async function readStream(stream) { for await (let chunk of stream) { console.log(chunk); } } دوم، Web Workers را برای عملیات CPU-bound بررسی کنید. Promise و Async/Await برای I/O مناسب هستند ولی عملیات سنگین CPU نیاز به Thread جداگانه دارد. سوم، با RxJS و Observable آشنا شوید. اگر با جریان‌های پیچیده داده سر و کار دارید، ممکن است Observable مدل مناسب‌تری از Promise باشد. چهارم، Generators و yield را بررسی کنید. Async/Await در واقع تکامل یافته Generator‌ها است و درک Generator‌ها به شما کمک می‌کند مکانیزم داخلی Async/Await را بهتر بفهمید. پنجم، قابلیت Top-Level Await در ES Modules را امتحان کنید. این قابلیت در سناریوهای خاصی مانند بارگذاری تنظیمات اولیه بسیار مفید است. در نهایت، مهم‌ترین توصیه این است: تمرین کنید. خواندن مقاله کافی نیست. کد بنویسید، پروژه واقعی بسازید و اشتباه کنید. هر اشتباه یک فرصت یادگیری است. Promise و Async/Await ابزارهایی هستند که هر روز در کارتان از آن‌ها استفاده خواهید کرد و هر چه بیشتر تمرین کنید، مسلط‌تر خواهید شد. ممنون که تا انتهای این مقاله همراه بودید. امیدوارم این محتوا برایتان مفید باشد و بتوانید آن را در پروژه‌هایتان به کار ببرید.