Promise.all vs Promise.allSettled in Javascript
Published: 2023-03-15 14:19:10

<p><code>Promise. all</code> and <code>Promise.allSettled</code> is used to iterate over an array of promises. However, both have a few subtle differences, let's understand that in this article. </p>
<h3 id="heading-promiseall-method"><code>Promise.all</code> method</h3>
<p><code>Promise. all</code> iterates over an array of promises and resolve to the array of values returned by each promise.</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> tasks = [
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">1000</span>, <span class="hljs-string">"task 1"</span>)
    }),
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">2000</span>, <span class="hljs-string">"task 2"</span>)
    }),
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">3000</span>, <span class="hljs-string">"task 3"</span>)
    }),
]
<span class="hljs-built_in">Promise</span>.all(tasks).then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(data); <span class="hljs-comment">// ["task 1", "task 2", "task 3"]</span>
})
</code></pre>
<p>If any one of the promises gets rejected then it immediately stops the execution and rejects with the error returned from the rejected promise.</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> tasks = [
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">1000</span>, <span class="hljs-string">"task 1"</span>)
    }),
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(reject, <span class="hljs-number">2000</span>, <span class="hljs-string">"task 2 failed"</span>)
    }),
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">3000</span>, <span class="hljs-string">"task 3"</span>)
    }),
]
<span class="hljs-built_in">Promise</span>.all(tasks).then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(data);
}).catch(<span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(error); <span class="hljs-comment">// task 2 failed</span>
})
</code></pre>
<h3 id="heading-promiseallsettled-method"><code>Promise.allSettled</code> method</h3>
<p><code>Promise.allSettled</code> iterates over an array of promises and waits for all the promises to get either resolved or rejected. It resolves to an array of data with each promise's status in the following format.</p>
<pre><code class="lang-js">[
  {<span class="hljs-attr">status</span>: <span class="hljs-string">"fulfilled"</span>, <span class="hljs-attr">value</span>: value1},
  {<span class="hljs-attr">status</span>: <span class="hljs-string">"fulfilled"</span>, <span class="hljs-attr">value</span>: value2},
  {<span class="hljs-attr">status</span>: <span class="hljs-string">"rejected"</span>,  <span class="hljs-attr">reason</span>: error}
]
</code></pre>
<p>Let's see what will be the output of the <code>tasks2</code> </p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> tasks = [
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">1000</span>, <span class="hljs-string">"task 1"</span>)
    }),
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(reject, <span class="hljs-number">2000</span>, <span class="hljs-string">"task 2 failed"</span>)
    }),
    <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>)=&gt;</span> {
        <span class="hljs-built_in">setTimeout</span>(resolve, <span class="hljs-number">3000</span>, <span class="hljs-string">"task 3"</span>)
    }),
]
<span class="hljs-built_in">Promise</span>.allSettled(tasks).then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(data);
})

<span class="hljs-comment">// Output</span>
[
  {
    <span class="hljs-attr">status</span>: <span class="hljs-string">'fulfilled'</span>,
    <span class="hljs-attr">value</span>: <span class="hljs-string">'task 1'</span>,
  },
  {
    <span class="hljs-attr">status</span>: <span class="hljs-string">'rejected'</span>,
    <span class="hljs-attr">reason</span>: <span class="hljs-string">'task 2 failed'</span>,
  },
  {
    <span class="hljs-attr">status</span>: <span class="hljs-string">'fulfilled'</span>,
    <span class="hljs-attr">value</span>: <span class="hljs-string">'task 3'</span>,
  },
];
</code></pre>
</br><p style="color:#757CF9;">This article is published w/ <a target="_blank" href="https://scattr.io?ref=dev">Scattr  ↗️</a></p>