JavaScript Promise.allSettled()

概要: このチュートリアルでは、Promiseを構成するためのPromise.allSettled()メソッドについて学びます。

Promise.allSettled()メソッドの概要

ES2020では、Promiseのリストを受け取り、すべての入力Promiseが解決（fulfilled）または拒否（rejected）された後に解決される新しいPromiseを返すPromise.allSettled()メソッドが導入されました。

以下は、Promise.allSettled()メソッドの構文を示しています。

Promise.allSettled(iterable);Code language: JavaScript (javascript)

iterableにはPromiseが含まれます。Promise.allSettled()は、すべての入力Promiseが解決されたときに非同期的にfulfilledされるペンディング（保留中）のPromiseを返します。

Promise.allSettled()メソッドは、入力されたPromiseの結果を記述する配列のオブジェクトに解決されるPromiseを返します。

各オブジェクトには、statusとvalue（またはreason）の2つのプロパティがあります。

• statusは、fulfilledまたはrejectedのいずれかになります。
• Promiseがfulfilledされた場合はvalue、Promiseがrejectedされた場合はreasonです。

次の図は、Promise.allSettled()メソッドがどのように機能するかを示しています。

この図では

• promise1はt1でerrorを理由にrejectedになります。
• promise2はt2でvalueを解決します。
• Promise.allSettled()メソッドは、promise1とpromise2のステータスと結果を記述するオブジェクトを含む配列に解決します。

JavaScript Promise.allSettled() の例

次の例では、Promise.allSettled()を使用して、すべての入力Promiseが解決するのを待ちます。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The first promise has resolved');
        resolve(10);
    }, 1 * 1000);

});

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The second promise has rejected');
        reject(20);
    }, 2 * 1000);
});

Promise.allSettled([p1, p2])
    .then((result) => {
        console.log(result);
    });
Code language: JavaScript (javascript)

出力

仕組み

• 最初のPromise p1は、1秒後に値10で解決されます。
• 2番目のPromise p2は、2秒後に値20を理由にrejectedされます。
• Promise.allSettled()は、2つの要素を持つresult配列に解決されるPromiseを返します。最初の要素はp1 Promiseによって解決されたオブジェクトであり、2番目の要素はp2 Promiseによってrejectedされた別のオブジェクトです。

まとめ

• Promise.allSettled()メソッドは、Promiseのiterableを受け入れ、すべての入力Promiseが解決されたときに、iterableオブジェクト内の各Promiseの結果を記述するオブジェクトの配列で解決する新しいPromiseを返します。