一、Promise基礎概念
1、什么是Promise?
Promise是一個表示異步操作最終完成或失敗的對象。它允許你為異步操作的成功結果和失敗原因分別綁定相應的處理方法。
2、Promise的三種狀態
- pending(等待中): 初始狀態,既不是成功,也不是失敗
- fulfilled(已成功): 操作成功完成
- rejected(已拒絕): 操作失敗
狀態一旦改變就不可逆:pending → fulfilled 或 pending → rejected
3、創建Promise
const myPromise = new Promise((resolve, reject) => {// 異步操作setTimeout(() => {const success = Math.random() > 0.3;if(success) {resolve("操作成功!"); // 將狀態改為 fulfilled} else {rejected("操作失敗!"); // 將狀態改為 rejected}}, 1000);
});
二、Promise的基本使用
1、處理Promise結果
myPromise.then(result => {console.log("成功", result);}).catch(error => {console.log("失敗", error); }).finally(() => {console.log("無論成功還是失敗都會執行");});
2、Promise鏈式調用
function asyncOperation(value) {return new Promise((resolve, reject) => {setTimeout(() => {if (value > 0.5) {resolve(value * 100);} else {reject("值太小");}}, 1000);});
}asyncOperation(0.8).then(result => {console.log("第一步結果:", result);return asyncOperation(result / 200); // 返回新 Promise}).then(result => {console.log("第二步結果:", result);return "最終結果: " + result; // 返回普通值}).then(result => {console.log(result);}).catch(error => {console.error("鏈中任何一步出錯:", error);});
三、Promise的靜態方法
1、Promise.all()
等待所有Promise完成,或任何一個Promise失敗
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));
const promise3 = fetch('https://api.example.com/data');Promise.all([promise1, promise2, promise3]).then(values => {console.log(values); // [3, 'foo', Response]}).catch(error => {console.error('有一個Promise失敗:', error); })
2、Promise.race()
返回最先完成或拒絕的Promise的結果
const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject('超時'), 5000)
);const fetchPromise = fetch('https://api.example.com/slow-data');Promise.race([fetchPromise, timeoutPromise]).then(response => {console.log('數據獲取成功'); }).catch(error => {console.error('請求超時或失敗:', error);});
3、Promise.allSettled()
等待所有Promise完成(無論成功或失敗)
const promises = [Promise.resolve('成功'),Promise.reject('失敗'),Promise.resolve('另一個成功')
];Promise.allSettled(promises).then(results => {results.forEach((result, index) => {if (result.status === 'fulfilled') {console.log(`Promise