Promise.all・Promise.allSettled・Promise.any・Promise.raceの違いをしっかりと把握する
TOC
最近のフロントエンドの実装において必ず扱う機会があるPromiseオブジェクトですが、JavaScriptには複数のPromiseオブジェクトを扱うことができるメソッドがいくつか用意されています。今回はそれぞれの特徴を簡単にまとめてみました。
Promise.all
Promise.all()は、実行される各Promiseオブジェクトが全て実行される、またはいずれかが拒否された場合、結果の配列を返却します。
const promise1 = Promise.resolve('promise1')
const promise2 = 10
const promise3 = new Promise(resolve => setTimeout(resolve, 10000, 'foo'))
Promise.all([promise1, promise2, promise3]).then(result => console.log(result))
// => ['promise1', 10, 'foo']const promise1 = Promise.resolve('promise1')
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'reject'))
const promise3 = new Promise(resolve => setTimeout(resolve, 10000, 'foo'))
Promise.all([promise1, promise2, promise3]).then(result => console.log(result))
// => Uncaught (in promise) rejectPromise.allSettled
Promise.all()と違いPromise.allSettled()は、全てのPromiseオブジェクトが実行、または拒否された場合、結果の配列を返却します。
const promise1 = Promise.resolve('promise1')
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'reject'))
const promise3 = new Promise(resolve => setTimeout(resolve, 10000, 'foo'))
Promise.allSettled([promise1, promise2, promise3]).then(result => console.log(result))
// => [{…}, {…}, {…}]
// 0: {status: 'fulfilled', value: 'promise1'}
// 1: {status: 'rejected', reason: 'reject'}
// 2: {status: 'fulfilled', value: 'foo'}Promise.any
ES2021で追加されたPromise.any()は、渡されたPromiseオブジェクトの内、1つでも正常に実行、もしくはすべて拒否された場合、結果を返却します。
const promise1 = Promise.reject('promise1 error')
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'resolve'))
const promise3 = new Promise(resolve => setTimeout(resolve, 10000, 'foo'))
Promise.any([promise1, promise2, promise3]).then(result => console.log(result))
// => 'resolve'Promise.race
Promise.race()は、渡されたPromiseオブジェクトの内、いずれかが正常に実行、もしくは拒否された場合、結果を返却します。
const promise1 = Promise.reject('promise1 error')
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'resolve'))
const promise3 = new Promise(resolve => setTimeout(resolve, 10000, 'foo'))
Promise.race([promise1, promise2, promise3]).then(result => console.log(result))
// => Promise {<rejected>: 'promise1 error'}
Search Posts