JavaScript における Promise の種類

タイプミスや文法上の間違いをご容赦ください。私はまだ勉強中です。 ?

約束とは何ですか?

Promise は、JavaScript で非同期操作を処理する方法の 1 つです。これらは、現在、将来、または決して利用できない可能性がある値を表します。 Promise には、保留中、履行済み、拒否という 3 つの状態があります。

約束の種類

1. Pending: Promise の初期状態。これは、操作がまだ進行中であり、まだ完了していないことを表します。

2. Fulfilled: 操作が正常に完了したときの Promise の状態。 Promise には値があり、使用することができます。

3. 拒否: 操作が失敗したときの Promise の状態。 Promise には失敗の理由があり、catch メソッドを使用して処理できます。

なぜ約束が重要なのでしょうか?

• よりクリーンで読みやすい非同期コードの作成に役立つことを約束します。
• これらは、より構造化された方法で非同期操作を処理する方法を提供します。
• Promise をチェーンして複数の非同期操作を順番に実行できます。
• データのフェッチ、複数のタスクの処理、または迅速な結果を求める競争のいずれであっても、Promise はモダン JavaScript では不可欠です。

1. シンプルな約束

const promise = new Promise((resolve, reject) => {
    // Imagine fetching user data from an API
    const user = {
        name: "Aasim Ashraf",
        age: 21,
    };

    user ? resolve(user) : reject("User not found");
});

promise
    .then((user) => console.log(user))
    .catch((error) => console.log(error));

API 呼び出しまたは非同期タスクによく使用される、解決または拒否する Promise。

• 使用する場合: API からのデータのフェッチなどの単一の非同期操作の場合。
• 利点: 1 つのブロックで成功と失敗を明確に処理します。

2. Promise.all の複数の操作

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

すべての Promise が解決されるまで待機します。1 つが失敗すると、チェーン全体が失敗します。一緒に解決する必要がある複数の非同期タスクに最適です。

• 使用する場合: 相互に依存しない複数の非同期操作の場合。
• 利点: 複数のデータを一度に取得し、まとめて処理します。
• 欠点: 1 つが失敗すると、すべてが失敗します。

Promise.all で 1 つの Promise が失敗した場合はどうなりますか?

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

Promise.all の問題は、1 つの Promise が失敗すると、チェーン全体が失敗することです。これを回避するには、Promise.allSettled.

を使用できます。

3.Promise.allSettled

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.allSettled([fetchUser, fetchPosts])
    .then((results) => {
        results.forEach((result) => {
            if (result.status === "fulfilled") {
                console.log("User Data:", result.value);
            } else {
                console.log("Error:", result.reason);
            }
        });
    });

Promise.allSettled は、解決されたか拒否されたかに関係なく、すべての Promise が解決されるまで待機します。ステータス、値、または理由を含むオブジェクトの配列を返します。

• いつ使用するか: 失敗も含め、すべての結果を知りたい場合。
• 利点: 複数のデータを一度に取得し、まとめて処理します。
• デメリット: どれかが失敗しても、連鎖は止まらない

4. Promise.race の最速結果

const fast = new Promise(resolve => setTimeout(resolve, 1000, "Fast"));

const slow = new Promise(resolve => setTimeout(resolve, 2000, "Slow"));

Promise.race([fast, slow])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log(error));

解決する最初の Promise の結果 (解決されたか拒否されたか) を返します。最初の利用可能な応答をロードするなど、速度が必要な場合に役立ちます。

• いつ使用するか: すべての結果を待つよりも速度が重要な場合。
• 制限: 最速の Promise が失敗すると、エラーが発生する可能性があります。

Promise.race の Promise が失敗した場合はどうなりますか?

const error = new Promise((resolve) => {
    setTimeout(() => resolve("Error"), 1000);
});

const success = new Promise((resolve) => {
    setTimeout(() => resolve("Success"), 2000);
});

Promise.race([error, success])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log("First Rejected",error));

最初の約束が失敗すると、チェーン全体が失敗します。これを回避するには、Promise.any を使用できます。

5. Promise.anyの最初の成功結果

const promise1 = Promise.reject("Error 1");
const promise2 = new Promise(resolve => setTimeout(resolve, 3000, "Promise 2"));

Promise.any([promise1, promise2])
    .then((result) => {
        console.log("First Success",result);
    })
    .catch((error) => console.log("All Rejected",error));

いずれかの Promise が解決されると解決されます。すべての Promise が拒否されるまで、すべての拒否を無視します。残りの結果に関係なく、最初の成功した結果が必要な場合に便利です。

• いつ使用するか: 残りの Promise に関係なく、最初の成功した結果が必要な場合。
• 制限: すべての Promise が拒否された場合、エラーがスローされます。

要約

• 簡単な約束: API からのデータのフェッチなどの単一の非同期操作の場合。
• Promise.all: 互いに依存しない複数の非同期操作用。
• Promise.allSettled: 失敗も含むすべての結果を知りたい場合。
• Promise.race: すべての結果を待つよりもスピードが重要な場合。
• Promise.any: 残りの Promise に関係なく、最初の成功した結果が必要な場合。

最終的な考え

• 適切な種類の Promise を選択することが、効率的な非同期プログラミングの鍵となります。
• スピード、複数の操作、またはすべての結果の処理など、ユースケースに最適な Promise を使用してください。

以上がJavaScript における Promise の種類の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。