JavaScript 中的 Promise 類型

請原諒我的拼字錯誤和文法錯誤，我還在學習中。 ？

什麼是承諾？

Promise 是 JavaScript 中處理非同步操作的一種方式。它們代表了一種現在可能可用、將來可用、或永遠不會可用的值。 Promise 有三種狀態：待處理、完成和拒絕。

承諾的類型

1. Pending：promise 的初始狀態。代表操作仍在進行中，尚未完成。

2. Fulfilled：操作成功完成時 Promise 的狀態。 Promise 具有價值，可以使用。

3. Rejected：操作失敗時 Promise 的狀態。 Promise 是有失敗原因的，可以使用 catch 方法來處理。

為什麼承諾很重要？

• Promise 有助於編寫更清晰、更易讀的非同步程式碼。
• 它們提供了一種以更結構化的方式處理非同步操作的方法。
• 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 取得資料。
• 優點：在一個區塊中乾淨地處理成功和失敗。

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都解決，如果一個失敗，整個鏈就會失敗。最適合需要一起解決的多個非同步任務。

• 何時使用： 對於彼此不依賴的多個非同步操作。
• 優點：一次獲取多個資料並一起處理它們。
• 缺點：一個失敗，全部失敗。

如果 Promise.all 中的一個 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 的問題是，如果一個 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.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： 對於單一非同步操作，例如從 API 取得資料。
• Promise.all: 用於多個互不依賴的非同步操作。
• Promise.allSettled：當你想知道所有結果，甚至失敗時。
• Promise.race：當速度比等待所有結果更重要時。
• Promise.any:當你需要第一個成功的結果時，無論其餘的承諾如何。

最後的想法

• 選擇正確的 Promise 類型是高效非同步程式設計的關鍵。
• 使用最適合您用例的 Promise：速度、多項操作或處理所有結果。

以上是JavaScript 中的 Promise 類型的詳細內容。更多資訊請關注PHP中文網其他相關文章！