在 JavaScript 中，Promise 是一種用於處理非同步操作的物件。它代表一個尚未完成的操作，並最終會返回一個值或者丟擲錯誤。Promise 可以處於以下三種狀態之一：
Pending（等待中） ：初始狀態，表示操作尚未完成。
Fulfilled（已完成） ：表示操作成功完成，並且有返回結果。
Rejected（已拒絕） ：表示操作失敗，並且有錯誤資訊。
1. 建立一個 Promise
你可以使用 new Promise() 來建立一個新的 Promise 物件。建構函式接受一個函式作為引數，這個函式又接受兩個引數：resolve 和 reject。這兩個引數是函式，用於標記操作的成功或失敗。
const promise = new Promise((resolve, reject) => {
// 非同步操作
let success = true;
if (success) {
resolve("成功！"); // 操作成功
} else {
reject("失敗！"); // 操作失敗
}
});
2. Promise 的方法
Promise 提供了以下幾種常用的方法來處理結果：
then()
then() 方法接受兩個回撥函式，第一個回撥函式用於處理成功的結果，第二個回撥函式用於處理失敗的情況。
promise.then( result => console.log(result), // 處理成功 error => console.log(error) // 處理失敗 );
catch()
catch() 方法是 then() 的快捷方式，用來處理 Promise 被拒絕（rejected）時的情況。它只接收一個引數，即錯誤處理函式。
promise .then(result => console.log(result)) .catch(error => console.log(error)); // 處理錯誤
finally()
finally() 方法無論 Promise 的最終狀態如何都會執行，用於進行清理操作，如關閉檔案或清理資源。
promise
.then(result => console.log(result))
.catch(error => console.log(error))
.finally(() => console.log("操作結束"));
3. 示例：非同步操作
// 模擬一個非同步操作，例如請求資料
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
const data = { message: "資料請求成功" };
resolve(data); // 模擬操作成功
}, 2000);
});
fetchData
.then(data => {
console.log(data.message); // 資料請求成功
})
.catch(error => {
console.error("發生錯誤：", error);
})
.finally(() => {
console.log("操作結束");
});
4. Promise.all()
Promise.all() 用於並行執行多個 Promise，並且返回一個新的 Promise，當所有 Promise 都完成時（無論成功還是失敗），Promise.all() 纔會觸發。
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, "第一個 Promise"));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 2000, "第二個 Promise"));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 3000, "第三個 Promise"));
Promise.all([promise1, promise2, promise3])
.then(results => {
console.log(results); // ["第一個 Promise", "第二個 Promise", "第三個 Promise"]
})
.catch(error => {
console.error("錯誤：", error);
});
5. Promise.race()
Promise.race() 會返回第一個完成的 Promise（無論是成功還是失敗）。如果有一個 Promise 被拒絕，它就會立即返回。
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, "第一個 Promise"));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 500, "第二個 Promise"));
Promise.race([promise1, promise2])
.then(result => console.log(result)) // "第二個 Promise"
.catch(error => console.error("錯誤：", error));
總結
Promise 是現代 JavaScript 處理中處理非同步操作的標準方式，比傳統的回撥函式（callback）更容易理解和維護，尤其在涉及多個非同步操作時。
作者：囂張農民
連結：https://juejin.cn/post/7434718961846992911
