JavaScript における Promise の種類-jsチュートリアル-php.cn

JavaScript における Promise の種類

Barbara Streisand

リリース： 2024-09-19 14:30:03

オリジナル

818 人が閲覧しました

Types of Promises in JavaScript

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

約束とは何ですか?

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

約束の種類

Pending: Promise の初期状態。これは、操作がまだ進行中であり、まだ完了していないことを表します。
Fulfilled: 操作が正常に完了したときの Promise の状態。 Promise には値があり、使用することができます。
拒否: 操作が失敗したときの 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 が拒否されるまで、すべての拒否を無視します。残りの結果に関係なく、最初の成功した結果が必要な場合に便利です。