225 lines
16 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article id="wikiArticle">
<div></div>
<p><code><strong>Promise.all(iterable)</strong></code> 方法返回一个 <a href="Reference/Global_Objects/Promise" title="Promise 对象用于表示一个异步操作的最终状态完成或失败以及该异步操作的结果值。"><code>Promise</code></a> 实例,此实例在 <code>iterable</code> 参数内所有的 <code>promise</code> 都“完成resolved”或参数中不包含 <code>promise</code> 时回调完成resolve如果参数中  <code>promise</code> 有一个失败rejected此实例回调失败reject失败原因的是第一个失败 <code>promise</code> 的结果。</p>
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/promise-all.html" width="100%"></iframe></div>
<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
<h2 id="语法">语法</h2>
<pre><code class="language-javascript"><var>Promise.all(iterable)</var>;</code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt>iterable</dt>
<dd>一个<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">可迭代</a>对象,如 <a href="Reference/Array" title="REDIRECT Array"><code>Array</code></a> 或 <a href="Reference/String" title="此页面仍未被本地化, 期待您的翻译!"><code>String</code></a></dd>
</dl>
<h3 id="返回值">返回值</h3>
<ul>
<li>如果传入的参数是一个空的可迭代对象,则返回一个<strong>已完成already resolved</strong>状态的 <a href="Reference/Global_Objects/Promise" title="Promise 对象用于表示一个异步操作的最终状态完成或失败以及该异步操作的结果值。"><code>Promise</code></a></li>
<li>如果传入的参数不包含任何 <code>promise</code>,则返回一个<strong>异步完成asynchronously resolved</strong> <a href="Reference/Global_Objects/Promise" title="Promise 对象用于表示一个异步操作的最终状态完成或失败以及该异步操作的结果值。"><code>Promise</code></a>。注意Google Chrome 58 在这种情况下返回一个<strong>已完成already resolved</strong>状态的 <a href="Reference/Global_Objects/Promise" title="Promise 对象用于表示一个异步操作的最终状态完成或失败以及该异步操作的结果值。"><code>Promise</code></a></li>
<li>其它情况下返回一个<strong>处理中pending</strong><a href="Reference/Global_Objects/Promise" title="Promise 对象用于表示一个异步操作的最终状态完成或失败以及该异步操作的结果值。"><code>Promise</code></a>。这个返回的 <code>promise</code> 之后会在所有的 <code>promise</code> 都完成或有一个 <code>promise</code> 失败时<strong>异步</strong>地变为完成或失败。 见下方关于“Promise.all 的异步或同步”示例。返回值将会按照参数内的 <code>promise</code> 顺序排列,而不是由调用 <code>promise</code> 的完成顺序决定。</li>
</ul>
<h2 id="说明">说明</h2>
<p>此方法在集合多个 <code>promise</code> 的返回结果时很有用。</p>
<p>完成Fulfillment<br/>
如果传入的可迭代对象为空,<code>Promise.all</code> 会同步地返回一个已完成resolved状态的<code>promise</code><br/>
如果所有传入的 <code>promise</code> 都变为完成状态,或者传入的可迭代对象内没有 <code>promise</code><code>Promise.all</code> 返回的 <code>promise</code> 异步地变为完成。<br/>
在任何情况下,<code>Promise.all</code> 返回的 <code>promise</code> 的完成状态的结果都是一个数组,它包含所有的传入迭代参数对象的值(也包括非 <code>promise</code> 值)。</p>
<p>失败/拒绝Rejection<br/>
如果传入的 <code>promise</code> 中有一个失败rejected<code>Promise.all</code> 异步地将失败的那个结果给失败状态的回调函数,而不管其它 <code>promise</code> 是否完成。</p>
<h2 id="示例">示例</h2>
<h3 id="Promise.all_的使用"><code>Promise.all</code> 的使用</h3>
<p><code>Promise.all</code> 等待所有都完成(或第一个失败)。</p>
<pre><code class="language-javascript">var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) =&gt; {
setTimeout(resolve, 100, 'foo');
});
Promise.all([p1, p2, p3]).then(values =&gt; {
console.log(values); // [3, 1337, "foo"]
});</code></pre>
<p>如果参数中包含非 <code>promise</code> 值,这些值将被忽略,但仍然会被放在返回数组中(如果 <code>promise</code> 完成的话):</p>
<pre><code class="language-javascript">// this will be counted as if the iterable passed is empty, so it gets fulfilled
var p = Promise.all([1,2,3]);
// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled
var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected
var p3 = Promise.all([1,2,3, Promise.reject(555)]);
// using setTimeout we can execute code after the stack is empty
setTimeout(function(){
console.log(p);
console.log(p2);
console.log(p3);
});
// logs
// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[3] }
// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[4] }
// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 555 }</code></pre>
<h3 id="Promise.all_的异步和同步"><code>Promise.all</code> 的异步和同步</h3>
<p>下面的例子中演示了 <code>Promise.all</code> 的异步性(如果传入的可迭代对象是空的,就是同步):</p>
<pre><code class="language-javascript">// we are passing as argument an array of promises that are already resolved,
// to trigger Promise.all as soon as possible
var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.all(resolvedPromisesArray);
// immediately logging the value of p
console.log(p);
// using setTimeout we can execute code after the stack is empty
setTimeout(function(){
console.log('the stack is now empty');
console.log(p);
});
// logs, in order:
// Promise { &lt;state&gt;: "pending" }
// the stack is now empty
// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
</code></pre>
<p>如果 <code>Promise.all</code> 失败,也是一样的:</p>
<pre><code class="language-javascript">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
var p = Promise.all(mixedPromisesArray);
console.log(p);
setTimeout(function(){
console.log('the stack is now empty');
console.log(p);
});
// logs
// Promise { &lt;state&gt;: "pending" }
// the stack is now empty
// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 44 }
</code></pre>
<p>但是,<code>Promise.all</code> <strong>当且仅当</strong>传入的可迭代对象为空时为同步:</p>
<pre><code class="language-javascript">var p = Promise.all([]); // will be immediately resolved
var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously
console.log(p);
console.log(p2)
setTimeout(function(){
console.log('the stack is now empty');
console.log(p2);
});
// logs
// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[0] }
// Promise { &lt;state&gt;: "pending" }
// the stack is now empty
// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
</code></pre>
<h3 id="Promise.all_的快速返回失败行为"><code>Promise.all</code> 的快速返回失败行为</h3>
<p><code>Promise.all</code> 在任意一个传入的 <code>promise</code> 失败时返回失败。例如,如果你传入的 <code>promise</code>中,有四个 <code>promise</code> 在一定的时间之后调用成功函数,有一个立即调用失败函数,那么 <code>Promise.all</code> 将立即变为失败。</p>
<pre><code class="language-javascript">var p1 = new Promise((resolve, reject) =&gt; {
setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) =&gt; {
setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) =&gt; {
setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) =&gt; {
setTimeout(resolve, 4000, 'four');
});
var p5 = new Promise((resolve, reject) =&gt; {
reject('reject');
});
Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
console.log(values);
}, reason =&gt; {
console.log(reason)
});
//From console:
//"reject"
//You can also use .catch
Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
console.log(values);
}).catch(reason =&gt; {
console.log(reason)
});
//From console:
//"reject"
</code></pre>
<h2 id="技术规范">技术规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-promise.all" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">Promise.all</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td>Initial definition in an ECMA standard.</td>
</tr>
<tr>
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-promise.all" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">Promise.all</small></a></td>
<td><span class="spec-Draft">Draft</span></td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a>.</p>
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>all</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
32</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
12</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
29</td><td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support">
<span>No support</span>
</abbr>
No</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
19</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
8</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
4.4.3</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
32</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
29</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
8</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
0.12</td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
<span>Full support</span>
 
</abbr></span></dt><dd>Full support</dd><dt><span class="bc-supports-no bc-supports">
<abbr class="bc-level bc-level-no only-icon" title="No support">
<span>No support</span>
 
</abbr></span></dt><dd>No support</dd></dl></section></div><p></p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="Reference/Global_Objects/Promise" title="Promise 对象用于表示一个异步操作的最终状态完成或失败以及该异步操作的结果值。"><code>Promise</code></a></li>
<li><a href="Reference/Global_Objects/Promise/race" title="Promise.race(iterable) 方法返回一个 promise一旦迭代器中的某个promise解决或拒绝返回的 promise就会解决或拒绝。"><code>Promise.race()</code></a></li>
</ul>
</article>