[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-promise-concurrency-all-settled-any-race":32,"code:js:true:5ijdnd":276,"code:js:true:17rqha5":277,"code:js:true:1d6yinq":278,"code:js:true:3483qp":279,"code:js:true:1x9fbm":280},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":258,"seo":259,"translationGroupId":263,"thread":264,"assessments":266,"translations":272,"quiz":274},"019fe660-1be2-74dd-aa56-0c8fd84204fd","promise-concurrency-all-settled-any-race","You reach for `Promise.all` for every concurrent request. Here's when to use the other three.",null,"`Promise.all` fails the moment any one request fails. `allSettled`, `any`, and `race` each solve a different concurrency problem — dashboard partial results, CDN failover, and timeouts. Here's the taxonomy.","\u002Fmedia\u002Fcovers\u002Fpromise-concurrency-all-settled-any-race.png",5,"2026-07-13T09:36:32.501Z",11,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"javascript","JavaScript",[52,54,57,60],{"slug":49,"name":53,"color":36},"Javascript",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"node","Node",{"assessments":64},1,{"slug":34,"title":66},"Promise.all vs allSettled vs any vs race — a live lab",{"blocks":68,"version":64},[69,73,79,82,85,89,92,116,119,122,125,128,131,134,138,141,145,148,151,155,158,162,165,168,172,175,178,182,185,189,192,195,199,202,205,208,211,214,217,220,223,226,229,233,241,244,247,250],{"id":70,"html":71,"type":72},"b1","\u003Cp>Imagine you're loading a dashboard. Four widgets, four APIs, fire them all at once:\u003C\u002Fp>","paragraph",{"id":74,"code":75,"type":76,"language":77,"highlight":78},"b2","const [users, revenue, alerts, activity] = await Promise.all([\n  fetchUsers(),\n  fetchRevenue(),\n  fetchAlerts(),\n  fetchActivity(),\n]);","code","js",[],{"id":80,"html":81,"type":72},"b3","\u003Cp>The alerts API is occasionally slow and sometimes returns a 500. When it does, your entire dashboard fails. Not one broken widget — four broken widgets. \u003Ccode>Promise.all\u003C\u002Fcode> rejects on the first failure and takes the other three successful results with it into the void.\u003C\u002Fp>",{"id":83,"html":84,"type":72},"b4","\u003Cp>You reached for the right primitive for concurrency, but the wrong one for this use case.\u003C\u002Fp>",{"id":86,"html":87,"text":87,"type":88,"level":31},"b5","The four methods and what they actually do","heading",{"id":90,"html":91,"type":72},"b6","\u003Cp>JavaScript gives you four ways to run promises concurrently. They differ in one thing: what happens when a promise fails or resolves first.\u003C\u002Fp>",{"id":93,"head":94,"rows":98,"type":115},"b7",[95,96,97],"Method","Resolves when","Rejects when",[99,103,107,111],[100,101,102],"\u003Ccode>Promise.all\u003C\u002Fcode>","All succeed","Any one fails",[104,105,106],"\u003Ccode>Promise.allSettled\u003C\u002Fcode>","All finish (success or failure)","Never",[108,109,110],"\u003Ccode>Promise.any\u003C\u002Fcode>","Any one succeeds","All fail",[112,113,114],"\u003Ccode>Promise.race\u003C\u002Fcode>","Any one finishes","Any one fails first","table",{"id":117,"html":118,"type":72},"b8","\u003Cp>The instinct to reach for \u003Ccode>Promise.all\u003C\u002Fcode> is understandable — it returns all the values in a single array and feels like the obvious way to "do these things at the same time." But concurrency and failure handling are two separate questions. \u003Ccode>Promise.all\u003C\u002Fcode> answers both at once, and the answer to the second one is often wrong for the situation you're in.\u003C\u002Fp>",{"id":120,"html":121,"type":72},"b9","\u003C!-- playground:start -->",{"id":123,"html":124,"text":124,"type":88,"level":31},"b10","🎮 Try it yourself",{"id":126,"html":127,"type":72},"b11","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-13-promise-concurrency-all-settled-any-race\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":129,"html":130,"type":72},"b12","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":132,"html":133,"type":72},"b13","\u003C!-- playground:end -->",{"id":135,"html":136,"text":137,"type":88,"level":31},"b14","\u003Ccode>Promise.allSettled\u003C\u002Fcode> — partial success","Promise.allSettled — partial success",{"id":139,"html":140,"type":72},"b15","\u003Cp>\u003Ccode>Promise.allSettled\u003C\u002Fcode> waits for every promise to settle — resolve \u003Cem>or\u003C\u002Fem> reject — and returns a result array describing what happened to each one:\u003C\u002Fp>",{"id":142,"code":143,"type":76,"language":77,"highlight":144},"b16","const results = await Promise.allSettled([\n  fetchUsers(),\n  fetchRevenue(),\n  fetchAlerts(),\n  fetchActivity(),\n]);\n\nfor (const result of results) {\n  if (result.status === 'fulfilled') {\n    console.log('got data:', result.value);\n  } else {\n    console.error('failed:', result.reason);\n  }\n}",[],{"id":146,"html":147,"type":72},"b17","\u003Cp>Each element has a \u003Ccode>status\u003C\u002Fcode> of \u003Ccode>'fulfilled'\u003C\u002Fcode> (with a \u003Ccode>value\u003C\u002Fcode>) or \u003Ccode>'rejected'\u003C\u002Fcode> (with a \u003Ccode>reason\u003C\u002Fcode>). No promise can cancel any other. This is the right primitive for your dashboard: three working widgets stay working even when the fourth API is down.\u003C\u002Fp>",{"id":149,"html":150,"type":72},"b18","\u003Cp>The typical UI pattern is to destructure and null-check independently:\u003C\u002Fp>",{"id":152,"code":153,"type":76,"language":77,"highlight":154},"b19","const [usersResult, revenueResult] = await Promise.allSettled([\n  fetchUsers(),\n  fetchRevenue(),\n]);\n\nconst users = usersResult.status === 'fulfilled' ? usersResult.value : null;\nconst revenue = revenueResult.status === 'fulfilled' ? revenueResult.value : null;",[],{"id":156,"html":157,"type":72},"b20","\u003Cp>Render each widget or its error state based on its own result. One API being down no longer bleeds into another widget's data.\u003C\u002Fp>",{"id":159,"html":160,"text":161,"type":88,"level":31},"b21","\u003Ccode>Promise.any\u003C\u002Fcode> — fastest successful response","Promise.any — fastest successful response",{"id":163,"html":164,"type":72},"b22","\u003Cp>\u003Ccode>Promise.any\u003C\u002Fcode> resolves with the value of whichever promise succeeds first. It only rejects if \u003Cem>all\u003C\u002Fem> promises fail — and even then, the rejection is an \u003Ccode>AggregateError\u003C\u002Fcode> that wraps all the individual failure reasons.\u003C\u002Fp>",{"id":166,"html":167,"type":72},"b23","\u003Cp>The use case is CDN failover: you have two or three endpoints and want the fastest response that actually works.\u003C\u002Fp>",{"id":169,"code":170,"type":76,"language":77,"highlight":171},"b24","const data = await Promise.any([\n  fetch('https:\u002F\u002Fcdn1.example.com\u002Fdata.json'),\n  fetch('https:\u002F\u002Fcdn2.example.com\u002Fdata.json'),\n  fetch('https:\u002F\u002Fcdn3.example.com\u002Fdata.json'),\n]).then(res => res.json());",[],{"id":173,"html":174,"type":72},"b25","\u003Cp>If cdn1 is slow and cdn2 responds first, you get cdn2's result immediately. If cdn1 responds later, it's discarded. If cdn1 and cdn2 both fail but cdn3 succeeds, you still get data.\u003C\u002Fp>",{"id":176,"html":177,"type":72},"b26","\u003Cp>The key distinction from \u003Ccode>Promise.race\u003C\u002Fcode>: a rejection from a fast server doesn't end \u003Ccode>Promise.any\u003C\u002Fcode>. It continues waiting for a success from the remaining sources. \u003Ccode>Promise.race\u003C\u002Fcode> stops at the first \u003Cem>settled\u003C\u002Fem> promise — a rejection is enough to close it. \u003Ccode>Promise.any\u003C\u002Fcode> stops at the first \u003Cem>resolved\u003C\u002Fem> promise. The two primitives are not interchangeable, and reaching for \u003Ccode>race\u003C\u002Fcode> when you want \u003Ccode>any\u003C\u002Fcode> gets you a CDN failover that fails as soon as your primary CDN sends any error.\u003C\u002Fp>",{"id":179,"html":180,"text":181,"type":88,"level":31},"b27","\u003Ccode>Promise.race\u003C\u002Fcode> — timeout pattern","Promise.race — timeout pattern",{"id":183,"html":184,"type":72},"b28","\u003Cp>\u003Ccode>Promise.race\u003C\u002Fcode> settles with whatever promise settles first — success or failure. The correct use case: imposing a timeout on an operation that doesn't have one built in.\u003C\u002Fp>",{"id":186,"code":187,"type":76,"language":77,"highlight":188},"b29","function withTimeout(promise, ms) {\n  const timeout = new Promise((_, reject) =>\n    setTimeout(() => reject(new Error(`Timed out after ${ms}ms`)), ms)\n  );\n  return Promise.race([promise, timeout]);\n}\n\nconst data = await withTimeout(fetchLargeReport(), 5000);",[],{"id":190,"html":191,"type":72},"b30","\u003Cp>If \u003Ccode>fetchLargeReport()\u003C\u002Fcode> resolves within 5 seconds, you get the data. If it takes longer, the timeout promise rejects first and \u003Ccode>Promise.race\u003C\u002Fcode> rejects with the timeout error.\u003C\u002Fp>",{"id":193,"html":194,"type":72},"b31","\u003Cp>Note that the original fetch continues running in the background after the race completes — the promise doesn't stop just because you stopped listening. Pair this with \u003Ccode>AbortController\u003C\u002Fcode> to actually cancel the request when the timeout fires.\u003C\u002Fp>",{"id":196,"html":197,"text":198,"type":88,"level":31},"b32","When \u003Ccode>Promise.all\u003C\u002Fcode> is the right choice","When Promise.all is the right choice",{"id":200,"html":201,"type":72},"b33","\u003Cp>\u003Ccode>Promise.all\u003C\u002Fcode> is not wrong — it solves a real and specific problem: \u003Cstrong>operations where you need all results and partial success is not a meaningful state\u003C\u002Fstrong>.\u003C\u002Fp>",{"id":203,"html":204,"type":72},"b34","\u003Cp>A form submission that must write to three services atomically: if any fails, the whole operation should fail and roll back. Fetching a user record and their permissions when you can't render the page with either one missing. Building a combined response from two sources where neither source alone produces a valid output.\u003C\u002Fp>",{"id":206,"html":207,"type":72},"b35","\u003Cp>The tell is whether partial success matters to your application. If one failure should stop everything, \u003Ccode>Promise.all\u003C\u002Fcode> is exactly right. If partial success is valid — and for most UI data fetching, it is — you want \u003Ccode>allSettled\u003C\u002Fcode>.\u003C\u002Fp>",{"id":209,"html":210,"type":72},"b36","\u003C!-- quiz:start -->",{"id":212,"html":213,"text":213,"type":88,"level":31},"b37","🧠 Test yourself",{"id":215,"html":216,"type":72},"b38","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-13-promise-concurrency-all-settled-any-race\">Take the 6-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":218,"html":219,"type":72},"b39","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":221,"html":222,"type":72},"b40","\u003C!-- quiz:end -->",{"id":224,"html":225,"text":225,"type":88,"level":31},"b41","The decision rule",{"id":227,"html":228,"type":72},"b42","\u003Cp>Before you write \u003Ccode>Promise.all\u003C\u002Fcode>, ask one question:\u003C\u002Fp>",{"id":230,"html":231,"type":232},"b43","\u003Cp>If one of these promises fails, should the others still resolve?\u003C\u002Fp>\n","quote",{"id":234,"type":235,"items":236,"ordered":18},"b44","list",[237,238,239,240],"\u003Cstrong>Yes, and I want all the results:\u003C\u002Fstrong> \u003Ccode>Promise.allSettled\u003C\u002Fcode>","\u003Cstrong>Yes, and I just want the fastest one that works:\u003C\u002Fstrong> \u003Ccode>Promise.any\u003C\u002Fcode>","\u003Cstrong>I want the first outcome, success or failure:\u003C\u002Fstrong> \u003Ccode>Promise.race\u003C\u002Fcode>","\u003Cstrong>No — one failure should fail everything:\u003C\u002Fstrong> \u003Ccode>Promise.all\u003C\u002Fcode>",{"id":242,"html":243,"type":72},"b45","\u003Cp>\u003Ccode>Promise.all\u003C\u002Fcode> was the first concurrent Promise method, so it's the one most developers reach for first. But the others aren't edge cases — they describe real, common failure modes that \u003Ccode>Promise.all\u003C\u002Fcode> handles badly. Next time you type \u003Ccode>Promise.all\u003C\u002Fcode>, spend one second on that question. You might mean one of the other three.\u003C\u002Fp>",{"id":245,"type":246},"b46","divider",{"id":248,"html":249,"type":72},"b47","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":251,"type":235,"items":252,"ordered":18},"b48",[253,254,255,256,257],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Imagine you're loading a dashboard. Four widgets, four APIs, fire them all at once:\n\n```js\nconst [users, revenue, alerts, activity] = await Promise.all([\n  fetchUsers(),\n  fetchRevenue(),\n  fetchAlerts(),\n  fetchActivity(),\n]);\n```\n\nThe alerts API is occasionally slow and sometimes returns a 500. When it does, your entire dashboard fails. Not one broken widget — four broken widgets. `Promise.all` rejects on the first failure and takes the other three successful results with it into the void.\n\nYou reached for the right primitive for concurrency, but the wrong one for this use case.\n\n## The four methods and what they actually do\n\nJavaScript gives you four ways to run promises concurrently. They differ in one thing: what happens when a promise fails or resolves first.\n\n| Method | Resolves when | Rejects when |\n|---|---|---|\n| `Promise.all` | All succeed | Any one fails |\n| `Promise.allSettled` | All finish (success or failure) | Never |\n| `Promise.any` | Any one succeeds | All fail |\n| `Promise.race` | Any one finishes | Any one fails first |\n\nThe instinct to reach for `Promise.all` is understandable — it returns all the values in a single array and feels like the obvious way to \"do these things at the same time.\" But concurrency and failure handling are two separate questions. `Promise.all` answers both at once, and the answer to the second one is often wrong for the situation you're in.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-13-promise-concurrency-all-settled-any-race\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## `Promise.allSettled` — partial success\n\n`Promise.allSettled` waits for every promise to settle — resolve *or* reject — and returns a result array describing what happened to each one:\n\n```js\nconst results = await Promise.allSettled([\n  fetchUsers(),\n  fetchRevenue(),\n  fetchAlerts(),\n  fetchActivity(),\n]);\n\nfor (const result of results) {\n  if (result.status === 'fulfilled') {\n    console.log('got data:', result.value);\n  } else {\n    console.error('failed:', result.reason);\n  }\n}\n```\n\nEach element has a `status` of `'fulfilled'` (with a `value`) or `'rejected'` (with a `reason`). No promise can cancel any other. This is the right primitive for your dashboard: three working widgets stay working even when the fourth API is down.\n\nThe typical UI pattern is to destructure and null-check independently:\n\n```js\nconst [usersResult, revenueResult] = await Promise.allSettled([\n  fetchUsers(),\n  fetchRevenue(),\n]);\n\nconst users = usersResult.status === 'fulfilled' ? usersResult.value : null;\nconst revenue = revenueResult.status === 'fulfilled' ? revenueResult.value : null;\n```\n\nRender each widget or its error state based on its own result. One API being down no longer bleeds into another widget's data.\n\n## `Promise.any` — fastest successful response\n\n`Promise.any` resolves with the value of whichever promise succeeds first. It only rejects if *all* promises fail — and even then, the rejection is an `AggregateError` that wraps all the individual failure reasons.\n\nThe use case is CDN failover: you have two or three endpoints and want the fastest response that actually works.\n\n```js\nconst data = await Promise.any([\n  fetch('https:\u002F\u002Fcdn1.example.com\u002Fdata.json'),\n  fetch('https:\u002F\u002Fcdn2.example.com\u002Fdata.json'),\n  fetch('https:\u002F\u002Fcdn3.example.com\u002Fdata.json'),\n]).then(res => res.json());\n```\n\nIf cdn1 is slow and cdn2 responds first, you get cdn2's result immediately. If cdn1 responds later, it's discarded. If cdn1 and cdn2 both fail but cdn3 succeeds, you still get data.\n\nThe key distinction from `Promise.race`: a rejection from a fast server doesn't end `Promise.any`. It continues waiting for a success from the remaining sources. `Promise.race` stops at the first *settled* promise — a rejection is enough to close it. `Promise.any` stops at the first *resolved* promise. The two primitives are not interchangeable, and reaching for `race` when you want `any` gets you a CDN failover that fails as soon as your primary CDN sends any error.\n\n## `Promise.race` — timeout pattern\n\n`Promise.race` settles with whatever promise settles first — success or failure. The correct use case: imposing a timeout on an operation that doesn't have one built in.\n\n```js\nfunction withTimeout(promise, ms) {\n  const timeout = new Promise((_, reject) =>\n    setTimeout(() => reject(new Error(`Timed out after ${ms}ms`)), ms)\n  );\n  return Promise.race([promise, timeout]);\n}\n\nconst data = await withTimeout(fetchLargeReport(), 5000);\n```\n\nIf `fetchLargeReport()` resolves within 5 seconds, you get the data. If it takes longer, the timeout promise rejects first and `Promise.race` rejects with the timeout error.\n\nNote that the original fetch continues running in the background after the race completes — the promise doesn't stop just because you stopped listening. Pair this with `AbortController` to actually cancel the request when the timeout fires.\n\n## When `Promise.all` is the right choice\n\n`Promise.all` is not wrong — it solves a real and specific problem: **operations where you need all results and partial success is not a meaningful state**.\n\nA form submission that must write to three services atomically: if any fails, the whole operation should fail and roll back. Fetching a user record and their permissions when you can't render the page with either one missing. Building a combined response from two sources where neither source alone produces a valid output.\n\nThe tell is whether partial success matters to your application. If one failure should stop everything, `Promise.all` is exactly right. If partial success is valid — and for most UI data fetching, it is — you want `allSettled`.\n\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 6-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-13-promise-concurrency-all-settled-any-race)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The decision rule\n\nBefore you write `Promise.all`, ask one question:\n\n> If one of these promises fails, should the others still resolve?\n\n- **Yes, and I want all the results:** `Promise.allSettled`\n- **Yes, and I just want the fastest one that works:** `Promise.any`\n- **I want the first outcome, success or failure:** `Promise.race`\n- **No — one failure should fail everything:** `Promise.all`\n\n`Promise.all` was the first concurrent Promise method, so it's the one most developers reach for first. But the others aren't edge cases — they describe real, common failure modes that `Promise.all` handles badly. Next time you type `Promise.all`, spend one second on that question. You might mean one of the other three.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":260,"canonical":261,"description":262},"You reach for `Promise.all` for every concurrent request. Here's when ","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fpromise-concurrency-all-settled-any-race","`Promise.all` fails the moment any one request fails. `allSettled`, `any`, and `race` each solve a different concurrency problem — dashboard partial results, CDN failover, and time","019fe660-1be2-74dd-aa56-1268853510e2",{"id":265,"locked":18},"019fe660-229c-77ce-b4e9-6fb47d3b1c34",[267],{"id":268,"slug":34,"title":269,"_count":270},"019fe776-3f54-779c-9eda-d4fc6ef32b0a","Promise concurrency: all, allSettled, any, race",{"questions":271},6,[273],{"locale":13,"slug":34},{"id":268,"slug":34,"title":269,"_count":275,"questionCount":271},{"questions":271},"\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>users\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> revenue\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> alerts\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> activity\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Promise\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">all\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchUsers\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchRevenue\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchAlerts\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchActivity\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> results \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Promise\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">allSettled\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchUsers\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchRevenue\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchAlerts\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchActivity\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-kwd\">for\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> result \u003Cspan class=\"shj-kwd\">of\u003C\u002Fspan> results\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">if\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>result\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>status \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'fulfilled'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'got data:'\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> result\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>value\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">else\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">error\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'failed:'\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> result\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>reason\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>usersResult\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> revenueResult\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Promise\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">allSettled\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchUsers\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetchRevenue\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> users \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> usersResult\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>status \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'fulfilled'\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">?\u003C\u002Fspan> usersResult\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>value \u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-num\">null\u003C\u002Fspan>;\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> revenue \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> revenueResult\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>status \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'fulfilled'\u003C\u002Fspan> \u003Cspan class=\"shj-oper\">?\u003C\u002Fspan> revenueResult\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>value \u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-num\">null\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> data \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Promise\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">any\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetch\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'https:\u002F\u002Fcdn1.example.com\u002Fdata.json'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetch\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'https:\u002F\u002Fcdn2.example.com\u002Fdata.json'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">fetch\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'https:\u002F\u002Fcdn3.example.com\u002Fdata.json'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">then\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>res \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> res\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">json\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-func\">withTimeout\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>promise\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> ms\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> timeout \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Promise\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>_\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> reject\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-func\">setTimeout\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> \u003Cspan class=\"shj-func\">reject\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Error\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">`Timed out after \u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">${\u003C\u002Fspan>ms\u003Cspan class=\"shj-kwd\">}\u003C\u002Fspan>\u003Cspan class=\"shj-str\">ms`\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> ms\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n  \u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Promise\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">race\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>promise\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> timeout\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> data \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-func\">withTimeout\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-func\">fetchLargeReport\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-num\">5000\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]