معضل Promise.all( ) : وقتی کمک می کند و وقتی درد دارد

Summarize this content to 400 words in Persian Lang
در توسعه مدرن جاوا اسکریپت، مدیریت عملیات ناهمزمان یک کار رایج است. خواه درخواست های API، جستجو در پایگاه های داده یا خواندن فایل ها باشد، کار با کدهای همگام تقریباً اجتناب ناپذیر است. یکی از ابزارهای رایجی که توسعه دهندگان با آن مواجه می شوند Promise.all () است. با این حال، بسیاری از ما، از جمله خود من، می‌توانیم در دام تلاش برای استفاده از Promise.all() بیفتیم، فقط به این دلیل که بدون اینکه واقعاً بفهمیم بهترین راه‌حل برای استفاده خاص ما است یا خیر.

1. پرش روی Promise.all() Bandwagon

به‌عنوان یک توسعه‌دهنده، به راحتی می‌توان با ویژگی‌ها یا ابزارهای جدید روبرو شد و فرض کرد که آنها باید در همه جا پیاده‌سازی شوند. من با Promise.all() در این وضعیت قرار گرفتم. با مطالعه در مورد اینکه چگونه چندین وعده را به طور موازی اجرا می کند و منتظر می ماند تا همه آنها قبل از ادامه کار تکمیل شوند، مشتاق بودم آن را در کد خود ادغام کنم. بدون اینکه به طور کامل بفهمم که آیا لازم است یا نه، پریدم روی گاری و هر جا که توانستم آن را به کار بردم.

به راحتی می توان فرض کرد که از آنجایی که ابزار قدرتمندی است، باید بهتر از جایگزین های ساده تر باشد. اما همانطور که به زودی متوجه شدم، استفاده کورکورانه ()Promise.all بدون در نظر گرفتن زمینه، همیشه به کارآمدترین یا خواندنی ترین کد منجر نمی شود.

2. مبانی جاوا اسکریپت ناهمزمان

قبل از اینکه به عمق مفید بودن Promise.all بپردازیم، ابتدا به نحوه عملکرد توابع ناهمزمان در جاوا اسکریپت نگاه می کنیم. هنگامی که یک تابع همگام می نویسید و از await استفاده می کنید، جاوا اسکریپت اجازه می دهد که این عملیات بدون مسدود کردن بقیه کد شما انجام شود. این بدان معنی است که شما می توانید یک عملیات را شروع کنید و در حالی که منتظر نتیجه هستید به سراغ عملیات دیگری بروید.

با این حال، اگر مراقب نباشید، ممکن است زمانی که عملیات به طور مستقل اجرا شوند، به طور غیر ضروری به یکدیگر وابسته شوند. من با Promise.all() در چنین موقعیتی قرار گرفتم، فکر می کردم همیشه ایده خوبی است که همه توابع async را به صورت موازی اجرا کنم.

مثال: اجرای متوالی توابع ناهمزمان

const fetchData = async () => {
const data1 = await getChart(); // Request #1
const data2 = await getDetails(); // Request #2
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

حتی اگر data1 و data2 یکی پس از دیگری در کد واکشی می شوند، مرورگر همچنان هر دو درخواست را به صورت ناهمزمان و تقریباً همزمان آغاز می کند. در واقع، وقتی تب Network را بررسی کردم، دیدم هر دو درخواست تقریباً همزمان شروع می شوند. این باعث شد متوجه شوم که جاوا اسکریپت قبلاً موارد را به صورت موازی مدیریت می‌کرد و Promise.all() لزوماً مورد نیاز نبود.

3. چه زمانی باید از Promise.all() استفاده کرد؟

با وجود عجله اولیه من برای استفاده از Promise.all() در همه جا، شرایطی وجود دارد که واقعاً می درخشد. این به ویژه زمانی مفید است که قبل از حرکت به جلو باید منتظر بمانید تا چندین عملیات ناهمزمان کامل شوند.

چرا از Promise.all() استفاده کنیم؟

Waiting for All Promises: اگر نتایج چند کار ناهمزمان به یکدیگر وابسته هستند، یا اگر نیاز دارید که همه آنها را قبل از ادامه تکمیل کنید، Promise.all() ایده آل است.
رسیدگی به خطا: Promise.all() سریع شکست می خورد – به این معنی که اگر هر قولی شکست بخورد، کل عملیات رد می شود. این می تواند زمانی مفید باشد که می خواهید اطمینان حاصل کنید که همه چیز با هم موفق می شود یا هیچ چیز به جلو حرکت نمی کند.
نتایج ترکیبی: اگر به نتایج همه وعده‌ها به طور همزمان نیاز دارید (مثلاً ترکیب داده‌های کاربر با سابقه خرید)، Promise.all () راه‌حل عالی است.

مثال: استفاده از Promise.all()

const fetchData = async () => {
const [data1, data2] = await Promise.all([getChart(), getDetails()]);
console.log(‘Both requests completed’); // This runs only when both requests finish
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، هر دو getChart() و getDetails() به صورت موازی اجرا می شوند و تابع منتظر می ماند تا هر دو به پایان برسند و به جلو حرکت کنند. Promise.all() در شرایطی مانند این که هر دو درخواست مرتبط هستند و باید با هم تکمیل شوند عالی است.

4. چرا I Didn't Need Promise.all() در مورد من

پس از چند بار اعمال Promise.all() متوجه شدم که همیشه کد من را بهتر نمی کند. در واقع، من مسائل را بیش از حد پیچیده می کردم. من دو درخواست مستقل API داشتم – getChart() و getDetails() – که هر کدام دارای اسپینر بارگیری و نتایج خاص خود بودند، و با این حال آنها را بی جهت با هم جمع می کردم.

با استفاده از Promise.all()، من کد را مجبور می کردم تا قبل از رسیدگی به هر یک از نتایج، منتظر تکمیل هر دو درخواست باشد، حتی اگر درخواست ها مستقل بودند و به یکدیگر متکی نبودند. در مواردی مانند این، Promise.all() تنها پیچیدگی را بدون هیچ سود واقعی اضافه می کند.

5. When Promise.all() Might Be Overkill

گاهی اوقات، Promise.all() overkill است. اگر توابع async شما مستقل هستند، به این معنی که یکی برای تکمیل به دیگری متکی نیست، دیگر نیازی به جمع کردن آنها با هم نیست. آنها می توانند به طور موازی بدون انتظار روی یکدیگر اجرا شوند و شما می توانید نتایج آنها را به طور مستقل مدیریت کنید. وقتی دیدم جاوا اسکریپت قبلاً وظایف ناهمزمان را بدون نیاز به گروه بندی کردن همه چیز به طور مؤثر انجام می دهد، متوجه این موضوع شد.

زمان اجتناب از Promise.all()

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

مثال: درخواست‌های مستقل بدون Promise.all()

useEffect(() => {
getChart(); // Trigger first async request
getDetails(); // Trigger second async request
}, []);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این تنظیمات، هر دو درخواست به صورت موازی بدون نیاز به Promise.all() اجرا می شوند. شما می توانید حالت های بارگذاری جداگانه را نشان دهید و هر نتیجه را به طور مستقل مدیریت کنید، که دقیقاً همان چیزی است که من برای پروژه خود نیاز داشتم.

6. سناریوهای دنیای واقعی برای استفاده یا اجتناب از Promise.all()

بیایید ببینیم که چگونه این مفاهیم در سناریوهای دنیای واقعی اعمال می شوند.

سناریوی 1: واکشی داده های مرتبط (از Promise.all() استفاده کنید)

تصور کنید در حال ساخت داشبوردی هستید که باید اطلاعات کاربر و تاریخچه خرید کاربر را با هم نشان دهید. در این مورد، قبل از رندر کردن رابط کاربری، باید منتظر بمانید تا هر دو اطلاعات بارگیری شوند. در اینجا، Promise.all() انتخاب درستی است:

const fetchData = async () => {
const [userInfo, purchaseHistory] = await Promise.all([
fetchUserInfo(),
fetchUserPurchaseHistory()
]);
console.log(‘Both user info and purchase history loaded’);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سناریو 2: تماس‌های API مستقل (Avoid Promise.all())

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

useEffect(() => {
getChart(); // Fire chart request
getDetails(); // Fire table request
}, []);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هر دو درخواست مستقل هستند و شما هر یک از آنها را جداگانه بررسی می کنید و به محض تکمیل هر یک، UI را به روز می کنید. Promise.all() در اینجا ضروری نیست.

نتیجه گیری: روی باند نپرید

Promise.all() یک ابزار قدرتمند است، اما همیشه بهترین راه حل نیست. من در ابتدا با این فرض که استفاده از آن در همه جا کدم را بهتر می کند، وارد کار شدم. با این حال، به سرعت متوجه شدم که در مواردی که توابع async مستقل هستند و حالت‌های بارگذاری خاص خود را دارند، Promise.all() در واقع می‌تواند کار را پیچیده‌تر کند.

نکات کلیدی:

زمانی که باید منتظر بمانید تا چندین وعده قبل از ادامه حل شوند، از Promise.all() استفاده کنید.
هنگامی که وظایف async مستقل هستند، از Promise.all() اجتناب کنید، و می توانید بدون انتظار غیرضروری آنها را به صورت جداگانه مدیریت کنید.

در نهایت، درک زمان و چرایی استفاده از ویژگی مانند Promise.all () به جای اینکه فرض کنیم همیشه مفید است، مهم است. پس از عقب نشینی و ارزیابی مجدد مورد استفاده، متوجه شدم که پایبندی به تماس‌های مستقل async رویکرد درستی است.

const fetchData = async () => {
  const data1 = await getChart();   // Request #1
  const data2 = await getDetails(); // Request #2
};

const fetchData = async () => {
  const [data1, data2] = await Promise.all([getChart(), getDetails()]);
  console.log('Both requests completed'); // This runs only when both requests finish
};

useEffect(() => {
  getChart();   // Trigger first async request
  getDetails(); // Trigger second async request
}, []);

const fetchData = async () => {
  const [userInfo, purchaseHistory] = await Promise.all([
    fetchUserInfo(),
    fetchUserPurchaseHistory()
  ]);
  console.log('Both user info and purchase history loaded');
};

useEffect(() => {
  getChart();   // Fire chart request
  getDetails(); // Fire table request
}, []);