var Component=(()=>{var v=Object.create;var o=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var P=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),T=(n,e)=>{for(var t in e)o(n,t,{get:e[t],enumerable:!0})},a=(n,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of w(e))!b.call(n,i)&&i!==t&&o(n,i,{get:()=>e[i],enumerable:!(s=y(e,i))||s.enumerable});return n};var j=(n,e,t)=>(t=n!=null?v(g(n)):{},a(e||!n||!n.__esModule?o(t,"default",{value:n,enumerable:!0}):t,n)),x=n=>a(o({},"__esModule",{value:!0}),n);var d=P((M,c)=>{c.exports=_jsx_runtime});var C={};T(C,{default:()=>f,frontmatter:()=>S});var r=j(d());var l=MDXCodeBlock;var h=`/** * @param {Array} iterable * @return {Promise} */ export default function promiseAll(iterable) { return new Promise((resolve, reject) => { // Preserve input order even if the promises settle in a different order. const results = new Array(iterable.length); let unresolved = iterable.length; if (unresolved === 0) { resolve(results); return; } iterable.forEach(async (item, index) => { try { const value = await item; results[index] = value; unresolved -= 1; if (unresolved === 0) { resolve(results); } } catch (err) { reject(err); } }); }); } `;var u=`type ReturnValue = { -readonly [P in keyof T]: Awaited }; export default function promiseAll( iterable: T, ): Promise> { return new Promise((resolve, reject) => { // Preserve input order even if the promises settle in a different order. const results = new Array(iterable.length); let unresolved = iterable.length; if (unresolved === 0) { resolve(results as ReturnValue); return; } iterable.forEach(async (item, index) => { try { const value = await item; results[index] = value; unresolved -= 1; if (unresolved === 0) { resolve(results as ReturnValue); } } catch (err) { reject(err); } }); }); } `;var p=`type ReturnValue = { -readonly [P in keyof T]: Awaited }; export default function promiseAll( iterable: T, ): Promise> { return new Promise((resolve, reject) => { // Preserve input order even if the promises settle in a different order. const results = new Array(iterable.length); let unresolved = iterable.length; if (unresolved === 0) { resolve(results as ReturnValue); return; } iterable.forEach((item, index) => { // \`Promise.resolve()\` lets plain values and promises share the same code path. Promise.resolve(item).then( (value) => { results[index] = value; unresolved -= 1; if (unresolved === 0) { resolve(results as ReturnValue); } }, (reason) => { reject(reason); }, ); }); }); } `;var S=void 0;function m(n){let e={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...n.components},{MDXMermaid:t}=e;return t||q("MDXMermaid",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.p,{children:["The coordination techniques used by ",(0,r.jsx)(e.code,{children:"Promise.all"})," also apply to related helpers such as ",(0,r.jsx)(e.code,{children:"Promise.race"}),", ",(0,r.jsx)(e.code,{children:"Promise.any"}),", and ",(0,r.jsx)(e.code,{children:"Promise.allSettled"}),"."]}),` `,(0,r.jsx)(e.h2,{children:"Solution"}),` `,(0,r.jsx)(e.p,{children:"Start observing every item immediately, store each fulfilled value at its original index, and resolve the outer promise only when every input has fulfilled."}),` `,(0,r.jsx)(e.p,{children:"The recommended interview answer exposes the coordination state directly:"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"results"}),": an array whose indexes match the input indexes."]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"unresolved"}),": how many inputs still need to fulfill before the outer promise can resolve."]}),` `,(0,r.jsxs)(e.li,{children:["The outer promise's ",(0,r.jsx)(e.code,{children:"reject"}),": the rejection path used by any input that rejects."]}),` `]}),` `,(0,r.jsx)(e.p,{children:"Handle these pieces:"}),` `,(0,r.jsxs)(e.ol,{children:[` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"Promise"}),"s are meant to be chained, so the function needs to return a ",(0,r.jsx)(e.code,{children:"Promise"}),"."]}),` `,(0,r.jsxs)(e.li,{children:["If the input array is empty, the returned ",(0,r.jsx)(e.code,{children:"Promise"})," resolves with an empty array."]}),` `,(0,r.jsxs)(e.li,{children:["The returned ",(0,r.jsx)(e.code,{children:"Promise"})," contains an array of resolved values in the same order as the input if all of them are fulfilled."]}),` `,(0,r.jsxs)(e.li,{children:["The returned ",(0,r.jsx)(e.code,{children:"Promise"})," rejects immediately if any input value rejects or throws an error."]}),` `,(0,r.jsxs)(e.li,{children:["The input array can contain non-",(0,r.jsx)(e.code,{children:"Promise"}),"s."]}),` `]}),` `,(0,r.jsxs)(e.h3,{children:["Approach 1: Count unresolved promises using ",(0,r.jsx)(e.code,{children:"async"})]}),` `,(0,r.jsxs)(e.p,{children:["Since the function needs to return a ",(0,r.jsx)(e.code,{children:"Promise"}),", construct a promise at the top level and do the coordination inside its executor."]}),` `,(0,r.jsxs)(e.p,{children:["The first special case is the empty input. With nothing to wait for, ",(0,r.jsx)(e.code,{children:"Promise.all([])"})," resolves with ",(0,r.jsx)(e.code,{children:"[]"}),"."]}),` `,(0,r.jsxs)(e.p,{children:["For non-empty inputs, attempt to resolve every item in the input array. This can be achieved using ",(0,r.jsx)(e.code,{children:"Array.prototype.forEach"})," or ",(0,r.jsx)(e.code,{children:"Array.prototype.map"}),". Completion order does not matter because each item writes to ",(0,r.jsx)(e.code,{children:"results[index]"}),", not to the end of the array. After each fulfillment, decrement ",(0,r.jsx)(e.code,{children:"unresolved"}),"; when it reaches ",(0,r.jsx)(e.code,{children:"0"}),", the ",(0,r.jsx)(e.code,{children:"results"})," array is complete and can be used to resolve the outer promise."]}),` `,(0,r.jsxs)(e.p,{children:["One thing to note here is that because the input array can contain non-",(0,r.jsx)(e.code,{children:"Promise"})," values, if they are not awaited, wrap each value with ",(0,r.jsx)(e.code,{children:"Promise.resolve()"}),". This allows ",(0,r.jsx)(e.code,{children:".then()"})," on each item without differentiating between promises and non-promises."]}),` `,(0,r.jsxs)(e.p,{children:["Lastly, if any value rejects or throws while being awaited, reject the top-level promise immediately without waiting for other pending inputs. The remaining inputs are not canceled, but once the outer promise is settled, later calls to ",(0,r.jsx)(e.code,{children:"resolve"})," or ",(0,r.jsx)(e.code,{children:"reject"})," cannot change its state."]}),` `,(0,r.jsx)(t,{code:`flowchart TD A["Create outer Promise"] --> B["results = new Array(iterable.length)"] B --> C["unresolved = iterable.length"] C --> D{"unresolved === 0?"} D -->|Yes| E["resolve(results)"] D -->|No| F["observe each item"] F --> G{"item settles"} G -->|Fulfilled| H["results[index] = value"] H --> I["unresolved -= 1"] I --> J{"unresolved === 0?"} J -->|Yes| E J -->|No| K["wait for remaining items"] K --> G G -->|Rejected| L["reject(err)"]`}),` `,(0,r.jsx)(l,{languages:{jsx:h,tsx:u}}),` `,(0,r.jsxs)(e.h3,{children:["Approach 2: Count unresolved promises using ",(0,r.jsx)(e.code,{children:"Promise.then"})]}),` `,(0,r.jsxs)(e.p,{children:["Here is an alternative version that uses ",(0,r.jsx)(e.code,{children:"Promise.then()"})," instead of ",(0,r.jsx)(e.code,{children:"async"}),"/",(0,r.jsx)(e.code,{children:"await"}),". The state shape is the same: normalize each item, write the fulfilled value at the input index, decrement the unresolved counter, and use the second ",(0,r.jsx)(e.code,{children:".then()"})," callback to route rejections to the outer promise."]}),` `,(0,r.jsx)(l,{children:p}),` `,(0,r.jsxs)(e.p,{children:["Once one of the ",(0,r.jsx)(e.code,{children:"Promise"}),"'s resolving functions (",(0,r.jsx)(e.code,{children:"resolve"})," or ",(0,r.jsx)(e.code,{children:"reject"}),') is called, the promise is in the "settled" state, and subsequent calls to either function can change neither the fulfillment value nor the rejection reason, nor can they change the eventual state from "fulfilled" to "rejected" or vice versa.']}),` `,(0,r.jsxs)(e.h2,{children:["Using ",(0,r.jsx)(e.code,{children:"Promise.all"})]}),` `,(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"Promise.all"})," can coordinate independent requests when the caller needs all their results:"]}),` `,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-js",children:`const [user, posts, tags] = await Promise.all([ fetch('/api/user').then((response) => response.json()), fetch('/api/posts').then((response) => response.json()), fetch('/api/tags').then((response) => response.json()), ]); `})}),` `,(0,r.jsx)(e.p,{children:"The requests are initiated without waiting for earlier requests to finish. If all succeed, the combined promise fulfills after every response body has been parsed. If one rejects, the combined promise rejects without canceling the other requests."}),` `,(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.a,{href:"/questions/quiz/how-is-promiseall-different-from-promiseallsettled",children:(0,r.jsx)(e.code,{children:"Promise.allSettled"})})," when the caller needs an outcome for every input, including failures. It waits for every input to settle."]}),` `,(0,r.jsx)(e.h2,{children:"Common pitfalls"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:["Pushing into ",(0,r.jsx)(e.code,{children:"results"})," records settlement order, not input order. Assign by index instead."]}),` `,(0,r.jsxs)(e.li,{children:["Awaiting each item in a sequential ",(0,r.jsx)(e.code,{children:"for"})," loop changes the intended concurrency semantics."]}),` `,(0,r.jsx)(e.li,{children:"Forgetting the empty input case leaves the returned promise pending forever."}),` `,(0,r.jsxs)(e.li,{children:["Handling only promises misses plain values; use ",(0,r.jsx)(e.code,{children:"await item"})," or ",(0,r.jsx)(e.code,{children:"Promise.resolve(item)"})," to normalize both."]}),` `,(0,r.jsxs)(e.li,{children:["Waiting for every input before rejecting changes ",(0,r.jsx)(e.code,{children:"Promise.all()"})," behavior. The first rejection should settle the outer promise."]}),` `]}),` `,(0,r.jsx)(e.h2,{children:"Scope"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsx)(e.li,{children:"Empty input array. An empty array should be returned."}),` `,(0,r.jsxs)(e.li,{children:["If the array contains non-",(0,r.jsx)(e.code,{children:"Promise"})," values, they will still be part of the returned array if all the input values are fulfilled."]}),` `,(0,r.jsx)(e.li,{children:"If the outcome is a rejection, the value of the first rejection should be returned."}),` `]}),` `,(0,r.jsx)(e.h2,{children:"Techniques"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:["Knowledge of ",(0,r.jsx)(e.code,{children:"Promise"}),"s, how to construct one, and how to use them."]}),` `,(0,r.jsx)(e.li,{children:"Async programming."}),` `]}),` `,(0,r.jsx)(e.h2,{children:"Notes"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:["The evaluator verifies concurrent observation through timing-based rejection tests. A sequential ",(0,r.jsx)(e.code,{children:"for (const item of iterable) { results.push(await item); }"})," implementation will fail cases where a later input rejects before an earlier one resolves, because the earlier ",(0,r.jsx)(e.code,{children:"await"})," blocks observation of the later rejection until it returns."]}),` `]}),` `,(0,r.jsx)(e.h2,{children:"Advanced: TypeScript return type"}),` `,(0,r.jsxs)(e.p,{children:["The TypeScript signature preserves the type at each input position. ",(0,r.jsx)(e.code,{children:"T"})," captures the input array or tuple, and ",(0,r.jsx)(e.code,{children:"ReturnValue"})," maps each position to ",(0,r.jsx)(e.code,{children:"Awaited"}),", which unwraps its promise type. The ",(0,r.jsx)(e.code,{children:"-readonly"})," modifier makes the resulting array or tuple mutable even when the input is readonly. For example, an input typed as ",(0,r.jsx)(e.code,{children:"readonly [Promise, string]"})," produces a ",(0,r.jsx)(e.code,{children:"Promise<[number, string]>"}),"."]}),` `,(0,r.jsxs)(e.p,{children:["Using ",(0,r.jsx)(e.code,{children:"Promise"})," would discard that relationship: callers would lose the known tuple length and the resolved type at each position. Runtime tests can pass even when the implementation does not satisfy the more precise TypeScript signature."]}),` `,(0,r.jsxs)(e.p,{children:["The implementation fills ",(0,r.jsx)(e.code,{children:"results"})," through numeric indexes, so TypeScript cannot prove that the completed array has exactly the mapped tuple type. The ",(0,r.jsx)(e.code,{children:"results as ReturnValue"})," assertion is used when resolving the empty array or after every input has fulfilled. Its justification is the algorithm's invariant: each resolved value is stored at its original index, and successful resolution waits for all positions. The assertion adds no runtime check, so preserving that invariant remains essential."]}),` `,(0,r.jsx)(e.h2,{children:"Resources"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all",children:"Promise.all() - JavaScript | MDN"})}),` `]})]})}function f(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(m,{...n})}):m(n)}function q(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(C);})(); ;return Component;