JavaScript 中的 Promise 類型-js教程-PHP中文網

JavaScript 中的 Promise 類型

Barbara Streisand

發布： 2024-09-19 14:30:03

原創

818 人瀏覽過

Types of Promises in JavaScript

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

什麼是承諾？

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

承諾的類型

Pending：promise 的初始狀態。代表操作仍在進行中，尚未完成。
Fulfilled：操作成功完成時 Promise 的狀態。 Promise 具有價值，可以使用。
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 解決時就解決。忽略所有拒絕，直到所有承諾都被拒絕。當您需要第一個成功的結果而不考慮其他結果時很有用。