Promise.race()
Promise.race()
メソッドは、反復可能オブジェクトの中の Promise のうちの1つが解決または拒否するとすぐに、その Promise の値または理由で解決または拒否する Promise を返します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
Promise.race(iterable);
引数
返値
待ち状態の Promise
で、反復可能オブジェクトの中で最初に解決または拒否した Promise の値を非同期に産出します。
説明
race
関数は、引数として渡された反復可能オブジェクトの中にある複数の Promise の中で解決する最初の Promise と同じ方法で解決される (同じ値を取る) Promise を返します。
渡された反復可能オブジェクトが空の場合、返される Promise はずっと待ち状態のままです。
反復可能オブジェクトに1つ以上の Promise 以外の値やすでに解決済みの Promise が含まれていた場合、 Promise.race
は反復可能オブジェクトの中で見つけたこれらの値の内の最初の一つで解決します。
例
Promise.race の非同期性
以下の例は、 Promise.race
の非同期性を示しています。
// 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 }
空の反復可能オブジェクトを渡すと、無限に解決しない Promise が返されます。
var foreverPendingPromise = Promise.race([]);
console.log(foreverPendingPromise);
setTimeout(function(){
console.log('the stack is now empty');
console.log(foreverPendingPromise);
});
// logs, in order:
// Promise { <state>: "pending" }
// the stack is now empty
// Promise { <state>: "pending" }
反復可能オブジェクトの中に1つ以上の Promise 以外の値や、すでに解決した Promise が含まれていると、 Promise.race
は配列の中で見つかった最初のこれらの値で解決します。
var foreverPendingPromise = Promise.race([]);
var alreadyFulfilledProm = Promise.resolve(100);
var arr = [foreverPendingPromise, alreadyFulfilledProm, "non-Promise value"];
var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(100)];
var p = Promise.race(arr);
var p2 = Promise.race(arr2);
console.log(p);
console.log(p2);
setTimeout(function(){
console.log('the stack is now empty');
console.log(p);
console.log(p2);
});
// logs, in order:
// Promise { <state>: "pending" }
// Promise { <state>: "pending" }
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: 100 }
// Promise { <state>: "fulfilled", <value>: "non-Promise value" }
Promise.race の使用 – setTimeout を使用した例
var p1 = new Promise(function(resolve, reject) {
setTimeout(() => resolve('one'), 500);
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(() => resolve('two'), 100);
});
Promise.race([p1, p2])
.then(function(value) {
console.log(value); // "two"
// Both fulfill, but p2 is faster
});
var p3 = new Promise(function(resolve, reject) {
setTimeout(() => resolve('three'), 100);
});
var p4 = new Promise(function(resolve, reject) {
setTimeout(() => reject(new Error('four')), 500);
});
Promise.race([p3, p4])
.then(function(value) {
console.log(value); // "three"
// p3 is faster, so it fulfills
}, function(reason) {
// Not called
});
var p5 = new Promise(function(resolve, reject) {
setTimeout(() => resolve('five'), 500);
});
var p6 = new Promise(function(resolve, reject) {
setTimeout(() => reject(new Error('six')), 100);
});
Promise.race([p5, p6])
.then(function(value) {
// Not called
}, function(error) {
console.log(error.message); // "six"
// p6 is faster, so it rejects
});
仕様書
ブラウザーの互換性
BCD tables only load in the browser