aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html')
-rw-r--r--files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html224
1 files changed, 224 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html b/files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html
new file mode 100644
index 0000000000..84264ce68b
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/all/index.html
@@ -0,0 +1,224 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+tags:
+ - AJAX
+ - Async-Await
+ - Fetch
+ - Promise
+ - Promise.all()
+ - Promise.race()
+ - promise.all
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.all(iterable)</strong></code> 方法返回一个 {{jsxref("Promise")}} 实例,此实例在 <code>iterable</code> 参数内所有的 <code>promise</code> 都“完成(resolved)”或参数中不包含 <code>promise</code> 时回调完成(resolve);如果参数中  <code>promise</code> 有一个失败(rejected),此实例回调失败(reject),失败的原因是第一个失败 <code>promise</code> 的结果。</p>
+
+<p>它通常在启动多个异步任务并发运行并为其结果创建承诺之后使用,以便人们可以等待所有任务完成。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</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 href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>Promise.all(iterable)</var>;</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>对象,如 {{jsxref("Array")}} 或 {{jsxref("String")}}。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<ul>
+ <li>如果传入的参数是一个空的可迭代对象,则返回一个<strong>已完成(already resolved)</strong>状态的 {{jsxref("Promise")}}。</li>
+ <li>如果传入的参数不包含任何 <code>promise</code>,则返回一个<strong>异步完成(asynchronously resolved)</strong> {{jsxref("Promise")}}。注意:Google Chrome 58 在这种情况下返回一个<strong>已完成(already resolved)</strong>状态的 {{jsxref("Promise")}}。</li>
+ <li>其它情况下返回一个<strong>处理中(pending)</strong>的{{jsxref("Promise")}}。这个返回的 <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 class="brush: js">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"]
+});</pre>
+
+<p>如果参数中包含非 <code>promise</code> 值,这些值将被忽略,但仍然会被放在返回数组中(如果 <code>promise</code> 完成的话):</p>
+
+<pre class="brush: js">// 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 }</pre>
+
+<h3 id="Promise.all_的异步和同步"><code>Promise.all</code> 的异步和同步</h3>
+
+<p>下面的例子中演示了 <code>Promise.all</code> 的异步性(如果传入的可迭代对象是空的,就是同步):</p>
+
+<pre class="brush: js">// 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] }
+</pre>
+
+<p>如果 <code>Promise.all</code> 失败,也是一样的:</p>
+
+<pre class="brush: js">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 }
+</pre>
+
+<p>但是,<code>Promise.all</code> <strong>当且仅当</strong>传入的可迭代对象为空时为同步:</p>
+
+<pre class="brush: js">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] }
+</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 class="brush: js">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"
+
+</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>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td>
+ <td>{{Spec2('ES2015')}}</td>
+ <td>Initial definition in an ECMA standard.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
+ <td>{{Spec2('ESDraft')}}</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 href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>