https://javascriptbit.com/component---src-templates-blog-post-js-c…ace-vs-any-index-md-110feddcb0511e70796d.js

1"use strict";(self.webpackChunkjavascript_bit=self.webpackChunkjavascript_bit||[]).push([[1534],{7168:function(n,a,s){s.r(a),s.d(a,{Head:function(){return m},default:function(){return d}});var t=s(1151),e=s(7294);function p(n){const a=Object.assign({p:"p",span:"span",h2:"h2",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",strong:"strong",ul:"ul",li:"li",em:"em",h3:"h3"},(0,t.ah)(),n.components);return e.createElement(e.Fragment,null,e.createElement(a.p,null,"You've got multiple async operations to run in parallel. Do you reach for ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.all</code>'}}),", ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.allSettled</code>'}}),", ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.race</code>'}}),", or ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.any</code>'}}),"?"),"\n",e.createElement(a.p,null,"They all do similar things — run Promises in parallel — but they behave differently when things go wrong. Pick the wrong one, and you'll silently swallow errors or throw away perfectly good data."),"\n",e.createElement(a.p,null,"Here's a practical guide to choosing the right Promise combinator."),"\n",e.createElement(a.h2,null,"Quick Comparison"),"\n",e.createElement(a.table,null,e.createElement(a.thead,null,e.createElement(a.tr,null,e.createElement(a.th,null,"Method"),e.createElement(a.th,null,"All must succeed?"),e.createElement(a.th,null,"Fails fast?"),e.createElement(a.th,null,"Reject value"),e.createElement(a.th,null,"Fulfills with"))),e.createElement(a.tbody,null,e.createElement(a.tr,null,e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.all</code>'}})),e.createElement(a.td,null,"Yes"),e.createElement(a.td,null,"Yes"),e.createElement(a.td,null,"First rejection"),e.createElement(a.td,null,"Array of results")),e.createElement(a.tr,null,e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.allSettled</code>'}})),e.createElement(a.td,null,"No"),e.createElement(a.td,null,"No"),e.createElement(a.td,null,"Never rejects"),e.createElement(a.td,null,"Array of ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">{status, value/reason}</code>'}}))),e.createElement(a.tr,null,e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.race</code>'}})),e.createElement(a.td,null,"No"),e.createElement(a.td,null,"Yes"),e.createElement(a.td,null,"First rejection OR fulfillment"),e.createElement(a.td,null,"First settled value")),e.createElement(a.tr,null,e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.any</code>'}})),e.createElement(a.td,null,"At least one"),e.createElement(a.td,null,"No"),e.createElement(a.td,null,"AggregateError"),e.createElement(a.td,null,"First fulfillment")))),"\n",e.createElement(a.p,null,"Let's break down each one with real examples."),"\n",e.createElement(a.h2,null,"Promise.all: All or Nothing"),"\n",e.createElement(a.p,null,"Use ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.all</code>'}})," when you need ",e.createElement(a.strong,null,"all")," operations to succeed. If one fails, the entire batch fails."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">fetchUser</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'/api/user\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token function-variable function">fetchPosts</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'/api/posts\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token function-variable function">fetchSettings</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'/api/settings\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// All three must succeed</span>\nPromise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token function">fetchUser</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">fetchPosts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">fetchSettings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>user<span class="token punctuation">,</span> posts<span class="token punctuation">,</span> settings<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token comment">// user = user data</span>\n    <span class="token comment">// posts = posts array</span>\n    <span class="token comment">// settings = settings object</span>\n    <span class="token function">renderDashboard</span><span class="token punctuation">(</span>user<span class="token punctuation">,</span> posts<span class="token punctuation">,</span> settings<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token comment">// If ANY fetch fails, you land here</span>\n    <span class="token function">showErrorMessage</span><span class="token punctuation">(</span><span class="token string">\'Failed to load dashboard\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"When to use it:")),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,"Loa

1ding dependent data (dashboard needs user + posts + settings)"),"\n",e.createElement(a.li,null,"Batch operations where partial success is useless"),"\n",e.createElement(a.li,null,"Parallel API calls that all must complete"),"\n"),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"Gotcha:")," ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.all</code>'}})," fails fast. The first rejection stops everything, even if other Promises would have succeeded."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Promise 1 resolves after 2s</span>\n<span class="token comment">// Promise 2 rejects after 1s</span>\n<span class="token comment">// Promise 3 resolves after 3s</span>\n\nPromise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n  <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">\'one\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'two failed\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">\'three\'</span><span class="token punctuation">)</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "two failed"</span>\n    <span class="token comment">// "one" and "three" are discarded</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.h2,null,"Promise.allSettled: Don't Fail Fast"),"\n",e.createElement(a.p,null,"Use ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.allSettled</code>'}})," when you want to run all Promises and handle each result individually. It never rejects — you always get an array of settled statuses."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> urls <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">

1\'/api/a\'</span><span class="token punctuation">,</span> <span class="token string">\'/api/b\'</span><span class="token punctuation">,</span> <span class="token string">\'/api/c\'</span><span class="token punctuation">,</span> <span class="token string">\'/api/d\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\nPromise<span class="token punctuation">.</span><span class="token function">allSettled</span><span class="token punctuation">(</span>urls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">results</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    results<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">\'fulfilled\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>urls<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> result<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n        console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>urls<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> failed:</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> result<span class="token punctuation">.</span>reason<span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"When to use it:")),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,"Batch operations where partial success is okay"),"\n",e.createElement(a.li,null,"Running independent tasks and aggregating results"),"\n",e.createElement(a.li,null,"Logging/reporting where you want to see all outcomes"),"\n"),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"Gotcha:")," You get objects, not raw values:"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">allSettled</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n  Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">\'success\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'failed\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// results[0] = { status: \'fulfilled\', value: \'success\' }</span>\n<span class="token comment">// results[1] = { status: \'rejected\', reason: Error(\'failed\') }</span></code></pre></div>'}}),"\n",e.createElement(a.h2,null,"Promise.race: First to Settle Wins"),"\n",e.createElement(a.p,null,"Use ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.race</code>'}})," when you only care about the ",e.createElement(a.strong,null,"first")," result, whether it's a success or failure. It's a race — the first Promise to settle wins."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Fetch with timeout</span>\n<span class="token keyword">const</span> <span class="token function-variable function">fetchWithTimeout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> timeout <span class="token operator">=</span> <span class="token number">5000</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n    <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">,</span>\n    <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span>

1\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'Timeout\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> timeout<span class="token punctuation">)</span>\n    <span class="token punctuation">)</span>\n  <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token function">fetchWithTimeout</span><span class="token punctuation">(</span><span class="token string">\'/api/slow-endpoint\'</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'Got response:\'</span><span class="token punctuation">,</span> response<span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">\'Failed:\'</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"When to use it:")),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,"Implementing timeouts"),"\n",e.createElement(a.li,null,"Caching (race between cache and network)"),"\n",e.createElement(a.li,null,"Trying multiple sources and taking the first response"),"\n"),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"Gotcha:")," The first Promise to ",e.createElement(a.em,null,"settle")," wins, not the first to ",e.createElement(a.em,null,"fulfill"),". A rejection wins over a slower fulfillment:"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript">Promise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n  <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">\'slow success\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'fast failure\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "fast failure" — even though it\'s a rejection</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.h2,null,"Promise.any: First Success Wins"),"\n",e.createElement(a.p,null,"Use ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.any</code>'}})," when you want the ",e.createElement(a.strong,null,"first successful")," result and you're okay with some failures. It rejects only if ",e.createElement(a.strong,null,"all")," Promises fail."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Try multiple servers, use the first that responds</span>\n<span class="token keyword">const</span> servers <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token string">\'https://api1.example.com/data\'</span><span class="token punctuation">,</span>\n  <span class="token string">\'https://api2.example.com/data\'</span><span class="token punctuation">,</span>\n  <span class="token string">\'https://api3.example.com/data\'</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\nPromise<span class="token punctuation">.</span><span class="token function">any</span><span class="token punctuation">(</span>servers<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">

1\'Got data from:\'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>err <span class="token keyword">instanceof</span> <span class="token class-name">AggregateError</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">\'All servers failed:\'</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>errors<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"When to use it:")),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,"Fallback strategies (try multiple sources)"),"\n",e.createElement(a.li,null,"Fastest available CDN endpoint"),"\n",e.createElement(a.li,null,"Any-success-is-enough scenarios"),"\n"),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"Gotcha:")," If all Promises reject, you get an ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">AggregateError</code>'}})," containing all rejection reasons:"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript">Promise<span class="token punctuation">.</span><span class="token function">any</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n  Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'Server 1 failed\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'Server 2 failed\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'Server 3 failed\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err <span class="token keyword">instanceof</span> <span class="token class-name">AggregateError</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>errors<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [Error(\'Server 1 failed\'), Error(\'Server 2 failed\'), Error(\'Server 3 failed\')]</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.h2,null,"Real-World Example: Image Gallery with Fallbacks"),"\n",e.createElement(a.p,null,"Here's a practical example combining multiple combinators:"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">loadGalleryWithFallbacks</span><span class="token punctuation">(</span><span class="token parameter">imageUrls<span class="token punctuation">,</span> timeout <span class="token operator">=</span> <span class="token number">3000</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token comment">// 1. Try to fetch all images with timeout</span>\n  <span class="token keyword">const</span> <span class="token function-variable function">fetchWithTimeout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">url</span><span class="token punctuation">)</span> <span class="token operator">=></span> Promise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n    <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">,</span>\n    <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span>

1\n      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'Timeout\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> timeout<span class="token punctuation">)</span>\n    <span class="token punctuation">)</span>\n  <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token comment">// 2. Get results for all images (don\'t fail fast)</span>\n  <span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">allSettled</span><span class="token punctuation">(</span>\n    imageUrls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetchWithTimeout</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token comment">// 3. Separate successes and failures</span>\n  <span class="token keyword">const</span> successful <span class="token operator">=</span> results\n    <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">\'fulfilled\'</span><span class="token punctuation">)</span>\n    <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> failed <span class="token operator">=</span> results\n    <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">\'rejected\'</span><span class="token punctuation">)</span>\n    <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span>reason<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token comment">// 4. If we have some success, use them</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span>successful<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Loaded </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>successful<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>imageUrls<span class="token punctuation">.</span>length<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> images</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">return</span> successful<span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token comment">// 5. If all failed, try fallback URLs (first success wins)</span>\n  <span class="token keyword">const</span> fallbackUrls <span class="token operator">=</span> imageUrls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">url</span> <span class="token operator">=></span> url<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">

1\'/images/\'</span><span class="token punctuation">,</span> <span class="token string">\'/fallback/\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">try</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> fallbackResult <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">any</span><span class="token punctuation">(</span>\n      fallbackUrls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">url</span> <span class="token operator">=></span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">)</span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'Using fallback image\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">return</span> <span class="token punctuation">[</span>fallbackResult<span class="token punctuation">]</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token comment">// Even fallbacks failed</span>\n    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">\'All images and fallbacks failed:\'</span><span class="token punctuation">,</span> err<span class="token punctuation">.</span>errors<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.h2,null,"Which One Should You Use?"),"\n",e.createElement(a.table,null,e.createElement(a.thead,null,e.createElement(a.tr,null,e.createElement(a.th,null,"Scenario"),e.createElement(a.th,null,"Use"))),e.createElement(a.tbody,null,e.createElement(a.tr,null,e.createElement(a.td,null,"Need all results to succeed"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.all</code>'}}))),e.createElement(a.tr,null,e.createElement(a.td,null,"Want all results, even if some fail"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.allSettled</code>'}}))),e.createElement(a.tr,null,e.createElement(a.td,null,"Only need first result (success or fail)"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.race</code>'}}))),e.createElement(a.tr,null,e.createElement(a.td,null,"Need first success, failures okay"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.any</code>'}}))),e.createElement(a.tr,null,e.createElement(a.td,null,"Implementing a timeout"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.race</code>'}}))),e.createElement(a.tr,null,e.createElement(a.td,null,"Fallback strategies"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.any</code>'}}))),e.createElement(a.tr,null,e.createElement(a.td,null,"Batch independent operations"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.allSettled</code>'}}))))),"\n",e.createElement(a.h2,null,"Common Mistakes"),"\n",e.createElement(a.h3,null,"Mistake 1: Using ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.all</code>'}})," when you don't need all results"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Bad: Loading 10 avatars, but you\'re okay with some failing</span>\nPromise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>avatars<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>loadAvatar<span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">allAvatars</span> <span class="token operator">=></span> <span class="token function">displayAvatars</span><span class="token punctuation">(</span>allAvatars<span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token comment">

1// One failed avatar = no avatars at all</span>\n    <span class="token function">displayError</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Good: Use allSettled to show what you can</span>\nPromise<span class="token punctuation">.</span><span class="token function">allSettled</span><span class="token punctuation">(</span>avatars<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>loadAvatar<span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">results</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> loaded <span class="token operator">=</span> results<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token string">\'fulfilled\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token function">displayAvatars</span><span class="token punctuation">(</span>loaded<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.h3,null,"Mistake 2: Forgetting that ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">Promise.race</code>'}})," rejects on first failure"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Bad: Expecting race to give you the first success</span>\nPromise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n  <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'/api/fast-but-flaky\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'/api/slow-but-reliable\'</span><span class="token punctuation">)</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'Got response\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token comment">// If the fast-but-flaky fails first, you never try the slow-but-reliable</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Good: Use Promise.any for first-success semantics</span>\nPromise<span class="token punctuation">.</span><span class="token function">any</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n  <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'/api/fast-but-flaky\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">\'/api/slow-but-reliable\'</span><span class="token punctuation">)</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span>\n  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'Got response\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.h3,null,"Mistake 3: Not handling empty arrays"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">// Bad: Promise.all with empty array resolves immediately</span>\nPromise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">results</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>results<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [] — might not be what you expect</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Be explicit about empty cases</span>\n<span class="token keyword">const</span> promises <span class="token operator">=</span> urls<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>fetch<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">if</span> <span class="token punctuation">(</span>promises<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n<span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>promises<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.h2,null,"Summary"),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Promise.all"),": All must succeed, fails fast. Use when you need everything."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Promise.allSettled"),": Runs all, never rejects. Use for batch operations where partial success is okay."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Promise.race"),": First to settle wins. Use for timeouts and first-response scenarios."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Promise.any"),": First success wins. Use for fallbacks and fastest-available scenarios."),"\n"),"\n",e.createElement(a.p,null,"Pick the right tool for the job, and you'll write more resilient async code."))}var o=function(n){void 0===n&&(n={});const{wrapper:a}=Object.assign({},(0,t.ah)(),n.components);return a?e.createElement(a,n,e.createElement(p,n)):p(n)}

1,c=s(1883),l=s(2198),u=s(9357),r=s(4992),i=s(6376);const k=n=>{var a;let{data:{previous:s,next:t,site:p,mdx:o},location:u,pageContext:k,children:m}=n;const d=(null===(a=p.siteMetadata)||void 0===a?void 0:a.title)||"Title",{seriesPosts:g}=k||{},f=o.fields;return e.createElement(l.Z,{location:u,title:d},e.createElement("article",{className:"blog-post",itemScope:!0,itemType:"http://schema.org/Article"},e.createElement("header",null,e.createElement("h1",{itemProp:"headline"},o.frontmatter.title),e.createElement("p",null,o.frontmatter.category&&e.createElement("span",{className:"category-pill"},o.frontmatter.category),o.frontmatter.date,(null==f?void 0:f.wordCount)>0&&e.createElement("span",{style:{marginLeft:"0.75rem",color:"inherit",opacity:.6}},"· ",Math.max(1,Math.round(f.wordCount/200))," min read"))),o.frontmatter.series&&g&&g.length>0&&e.createElement(i.Z,{seriesSlug:o.frontmatter.series,currentSlug:o.fields.slug,seriesPosts:g}),e.createElement("section",{itemProp:"articleBody"},m),e.createElement(r.Z),e.createElement("hr"),e.createElement("footer")),e.createElement("nav",{className:"blog-post-nav"},e.createElement("ul",{style:{display:"flex",flexWrap:"wrap",justifyContent:"space-between",listStyle:"none",padding:0}},e.createElement("li",null,s&&e.createElement(c.Link,{to:s.fields.slug,rel:"prev"},"← ",s.frontmatter.title)),e.createElement("li",null,t&&e.createElement(c.Link,{to:t.fields.slug,rel:"next"},t.frontmatter.title," →")))))},m=n=>{let{data:{mdx:a}}=n;return e.createElement(u.Z,{title:a.frontmatter.title,description:a.frontmatter.description||a.excerpt})};function d(n){return e.createElement(k,n,e.createElement(o,n))}},6376:function(n,a,s){var t=s(5785),e=s(7294),p=s(1883);const o={"browser-concurrency":{title:"Browser Concurrency",description:"A practical guide to sharing data and coordinating work across browser threads — tabs, workers, and shared memory."},"frontend-system-design":{title:"Frontend System Design Interview Prep",description:"A complete guide to acing frontend system design interviews — from the RADIO framework to real-world component designs asked at FAANG."}};a.Z=n=>{let{seriesSlug:a,currentSlug:s,seriesPosts:c}=n;if(!a||!c||0===c.length)return null;const l=o[a]||{title:a,description:""},u=(0,t.Z)(c).sort(((n,a)=>n.seriesOrder-a.seriesOrder)),r=u.findIndex((n=>n.slug===s)),i=r>=0?"Part "+(r+1)+" of "+u.length:u.length+" articles";return e.createElement("nav",{"aria-label":l.title+" series navigation",style:{borderLeft:"4px solid #4f46e5",background:"#f0f4ff",borderRadius:"0 6px 6px 0",padding:"1rem 1.25rem",marginBottom:"2rem",fontFamily:"var(--fontFamily-sans, system-ui, sans-serif)"}},e.createElement("p",{style:{margin:"0 0 0.75rem 0",fontSize:"0.95rem",fontWeight:700,color:"#1e1b4b",letterSpacing:"-0.01em"}},"📚 ",l.title," — ",i),e.createElement("ol",{style:{listStyle:"none",padding:0,margin:"0 0 0.75rem 0"}},u.map(((n,a)=>{const t=n.slug===s,o=a<r,c={marginBottom:"0.35rem",fontSize:"0.9rem",display:"flex",alignItems:"baseline",gap:"0.4rem"},l=t?"→":o?"✓":"  ",u={flexShrink:0,width:"1.2em",color:t?"#4f46e5":o?"#6b7280":"#9ca3af",fontWeight:t?700:400};return t?e.createElement("li",{key:n.slug,style:c,"aria-current":"page"},e.createElement("span",{style:u},l),e.createElement("strong",{style:{color:"#1e1b4b"}},a+1,". ",n.title)):e.createElement("li",{key:n.slug,style:c},e.createElement("span",{style:u},l),e.createElement(p.Link,{to:n.slug,style:{color:o?"#6b7280":"#4f46e5",textDecoration:"none"}},a+1,". ",n.title))}))),e.createElement(p.Link,{to:"/series/"+a+"/",style:{fontSize:"0.85rem",color:"#4f46e5",textDecoration:"none",fontWeight:600}},"View all articles in this series →"))}},4992:function(n,a,s){var t=s(7294);a.Z=()=>{const{0:n,1:a}=(0,t.useState)(!1);(0,t.useEffect)((()=>{sessionStorage.getItem("hideKofi")&&a(!0)}),[]);return n?null:t.createElement(t.Fragment,null,t.createElement("a",{target:"_blank",rel:"noreferrer",href:"https://ko-fi.com/javascriptbit"},"Donate"),t.createElement("button",{style:{marginLeft:"1em"},onClick:n=>{n.preventDefault(),a(!0),sessionStorage.setItem("hideKofi","true")}},"Hide for now"))}},2198:function(n,a,s){s.d(a,{Z:function(){return l}});var t=s(7294),e=s(1883),p=s(1151);var o=()=>{const[n,a]=t.useState(null);t.useEffect((()=>{const n=document.documentElement.getAttribute("data-theme")||"light";a(n)}),[]);return null===n?t.createElement("span",{style:{width:32,display:"inline-block"}}):t.createElement("button",{onClick:()=>{const s="dark"===n?"light":"dark";a(s),document.documentElement.setAttribute("data-theme",s);try{localStorage.setItem("jsbit-theme",s)}catch(t){}},"aria-label":"dark"===n?"Switch to light mode":"Switch to dark mode",title:"dark"===n?"Light mode":"Dark mode",style:{background:"none",border:"none",cursor:"pointer",fontSize:"1.2rem",padding:"4px 8px",borderRadius:"6px",lineHeight:1,color:"inherit",opacity:.75,transition:"opacity 0.15s ease"},onMouseEnter:n=>n.currentTarget.style.opacity="1",onMouseLeave:n=>n.currentTarget.style.opacity="0.75"},"dark"===n?"☀️":"🌙")};const c={FullscreenContainer:function(n){let{child:a}=n;const{0:s,1:e}=(0,t.useState)(!1),p=(0,t.useCallback)((n=>{"Enter"===n.key?e(!s):"Escape"===n.key&&e(!1)}),[s]);return t.createElement("div",{className:"fullscreen "+(s?"active":"")},t.createElement("div",{className:"buttons-container"},t.createElement("span",{tabIndex:-1,role:"button",onClick:()=>e(!s),onKeyUp:p},t.createElement("img",{src:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAw

1MDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTUuMDAwMDAwLCAtMjU3LjAwMDAwMCkiPjxnIGlkPSJmdWxsc2NyZWVuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTUuMDAwMDAwLCAyNTcuMDAwMDAwKSI+PHBhdGggZD0iTTIsOSBMMCw5IEwwLDE0IEw1LDE0IEw1LDEyIEwyLDEyIEwyLDkgTDIsOSBaIE0wLDUgTDIsNSBMMiwyIEw1LDIgTDUsMCBMMCwwIEwwLDUgTDAsNSBaIE0xMiwxMiBMOSwxMiBMOSwxNCBMMTQsMTQgTDE0LDkgTDEyLDkgTDEyLDEyIEwxMiwxMiBaIE05LDAgTDksMiBMMTIsMiBMMTIsNSBMMTQsNSBMMTQsMCBMOSwwIEw5LDAgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+",alt:"Toggle Full Screen",color:"currentColor"}))),a)}};var l=n=>{let{location:a,title:s,children:l}=n;const u="/"===a.pathname,[r,i]=t.useState(2024);let k;return t.useEffect((()=>{i((new Date).getFullYear())}),[]),k=u?t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},t.createElement("h1",{className:"main-heading"},t.createElement(e.Link,{to:"/"},s)),t.createElement(o,null)):t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},t.createElement(e.Link,{className:"header-link-home",to:"/"},s),t.createElement(o,null)),t.createElement(p.Zo,{components:c},t.createElement("div",{className:"global-wrapper","data-is-root-path":u},t.createElement("header",{className:"global-header"},k),t.createElement("main",null,l),t.createElement("footer",null,"© ",r,", Built with"," ",t.createElement("a",{href:"https://www.gatsbyjs.com"},"Gatsby"))))}},9357:function(n,a,s){var t=s(7294),e=s(1883);a.Z=n=>{var a,s,p;let{description:o,title:c,children:l}=n;const{site:u}=(0,e.useStaticQuery)("2841359383"),r=o||u.siteMetadata.description,i=null===(a=u.siteMetadata)||void 0===a?void 0:a.title;return t.createElement(t.Fragment,null,t.createElement("title",null,i?c+" | "+i:c),t.createElement("meta",{name:"description",content:r}),t.createElement("meta",{property:"og:title",content:c}),t.createElement("meta",{property:"og:description",content:r}),t.createElement("meta",{property:"og:type",content:"website"}),t.createElement("meta",{name:"twitter:card",content:"summary"}),t.createElement("meta",{name:"twitter:creator",content:(null===(s=u.siteMetadata)||void 0===s||null===(p=s.social)||void 0===p?void 0:p.twitter)||""}),t.createElement("meta",{name:"twitter:title",content:c}),t.createElement("meta",{name:"twitter:description",content:r}),l)}},1151:function(n,a,s){s.d(a,{Zo:function(){return c},ah:function(){return p}});var t=s(7294);const e=t.createContext({});function p(n){const a=t.useContext(e);return t.useMemo((()=>"function"==typeof n?n(a):{...a,...n}),[a,n])}const o={};function c({components:n,children:a,disableParentContext:s}){let c;return c=s?"function"==typeof n?n({}):n||o:p(n),t.createElement(e.Provider,{value:c},a)}}}]);
2//# sourceMappingURL=component---src-templates-blog-post-js-content-file-path-opt-build-repo-content-blog-javascript-promise-all-vs-allsettled-vs-race-vs-any-index-md-110feddcb0511e70796d.js.map