1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: Promise.race()
slug: Web/JavaScript/Reference/Global_Objects/Promise/race
tags:
- Promise
translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
---
<div>{{JSRef}}</div>
<p><strong><code>Promise.race(iterable)</code> </strong>方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。</p>
<div>{{EmbedInteractiveExample("pages/js/promise-race.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="Syntax" name="Syntax">语法</h2>
<pre class="syntaxbox notranslate"><var>Promise.race(iterable)</var>;</pre>
<h3 id="参数"><strong>参数</strong></h3>
<dl>
<dt>iterable</dt>
<dd>可迭代对象，类似{{jsxref("Array")}}。详见 <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>一个<strong>待定的</strong> {{jsxref("Promise")}} 只要给定的迭代中的一个promise解决或拒绝，就采用第一个promise的值作为它的值，从而<strong>异步</strong>地解析或拒绝（一旦堆栈为空）。</p>
<h2 id="Description" name="Description">描述</h2>
<p><code>race</code> 函数返回一个 <code>Promise</code>，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是两个中的哪个。</p>
<p>如果传的迭代是空的，则返回的 promise 将永远等待。</p>
<p>如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺，则<code> Promise.race</code> 将解析为迭代中找到的第一个值。</p>
<h2 id="示例">示例</h2>
<h3 id="Promise.race的异步性">Promise.race的异步性</h3>
<pre class="brush: js notranslate">// we are passing as argument an array of promises that are already resolved,
// to trigger Promise.race as soon as possible
var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.race(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 { <state>: "pending" }
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: 33 }</pre>
<h3 id="使用_Promise.race_–_setTimeout_的示例">使用 Promise.race – setTimeout 的示例</h3>
<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function(value) {
console.log(value); // "two"
// 两个都完成，但 p2 更快
});
var p3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "three");
});
var p4 = new Promise(function(resolve, reject) {
setTimeout(reject, 500, "four");
});
Promise.race([p3, p4]).then(function(value) {
console.log(value); // "three"
// p3 更快，所以它完成了
}, function(reason) {
// 未被调用
});
var p5 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "five");
});
var p6 = new Promise(function(resolve, reject) {
setTimeout(reject, 100, "six");
});
Promise.race([p5, p6]).then(function(value) {
// 未被调用
}, function(reason) {
console.log(reason); // "six"
// p6 更快，所以它失败了
});
</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.race', 'Promise.race')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition in an ECMA standard.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{Compat("javascript.builtins.Promise.race")}}</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{jsxref("Promise")}}</li>
<li>{{jsxref("Promise.all()")}}</li>
</ul>
|
