停止在 JavaScript 中使用 Promise.all()
JavaScript 中的 Promises 是什么?
如果你偶然發(fā)現(xiàn)了這篇文章,你可能已經(jīng)對 promises 很熟悉了。但對于那些新接觸 JavaScript 的人來說,我們來詳細解釋一下。從本質(zhì)上講,Promise 對象表示異步操作的最終完成或失敗。有趣的是,當(dāng) promise 被創(chuàng)建時,其值可能不會立即可用。
const promise = new Promise((resolve, reject) => {
// 一些異步操作
if (/* 操作成功 */) {
resolve(result);
} else {
reject(error);
}
});
它們有3種狀態(tài):
- Pending(待定):這是初始狀態(tài),既沒有實現(xiàn)也沒有被拒絕。
- Fulfilled(已實現(xiàn)):當(dāng) promise 成功完成并產(chǎn)生值時的狀態(tài)。
- Rejected(已拒絕):當(dāng)發(fā)生錯誤并且 promise 中的操作不成功時的狀態(tài)。
一旦 promise 被解決,你可以使用 .then() 來處理結(jié)果,使用 .catch() 來管理其執(zhí)行過程中出現(xiàn)的任何錯誤。
promise
.then(result => {
console.log('成功:', result);
})
.catch(error => {
console.error('錯誤:', error);
});
理解 Promise.all()
當(dāng)同時處理多個 promises 時,你可以利用內(nèi)置的 Promise.all([]) 方法。此方法接受一個 promises 數(shù)組并返回一個統(tǒng)一的 promise。關(guān)鍵是,只有當(dāng)所有輸入的 promises 都成功解決時,這個組合的 promise 才會解決。如果其中一個失敗,整個 promise 就會被拒絕。以下是一個例子:
const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');
Promise.all([promise1, promise2, promise3])
.then(values => {
console.log('所有數(shù)據(jù)已獲取:', values);
})
.catch(error => {
console.error('發(fā)生錯誤:', error);
});
這種方法通常用于多個相關(guān)異步任務(wù)且其工作相互依賴的情況,因此我們希望在繼續(xù)執(zhí)行代碼之前,所有異步任務(wù)都能成功。
揭示 Promise.allSettled()
使用 Promise.allSettled([]) 與 Promise.all([]) 類似,但不同之處在于它會等待所有輸入的 promises 完成或被拒絕,并返回描述每個 promise 結(jié)果的對象數(shù)組。
const promise1 = Promise.resolve('成功 1');
const promise2 = Promise.reject('錯誤 2');
const promise3 = Promise.resolve('成功 3');
Promise.allSettled([promise1, promise2, promise3])
.then(results => {
results.forEach(result => {
if(result.status === 'fulfilled') {
console.log('成功取得值:', result.value);
} else {
console.error('因為原因被拒絕:', result.reason);
}
});
});
//輸出
// 成功取得值:成功 1
// 因為原因被拒絕:錯誤 2
// 成功取得值:成功 3
它通常用于處理不互相依賴的異步操作,你想知道每一個的結(jié)果。
為什么 Promise.allSettled() 更出色
總的來說,使用 Promise.allSettled() 而不是 Promise.all() 在大多數(shù)常見情況下都有其優(yōu)勢:
全面的結(jié)果信息
如果 promises 中的任何一個被拒絕,Promise.all() 的立即拒絕可能會使得確定其他 promises 的狀態(tài)變得困難,尤其是當(dāng)其他 promises 成功解決時。使用 Promise.allSettled([]) 可以為你提供結(jié)果的完整畫面。
優(yōu)雅的錯誤處理
Promise.all() 的“快速失敗”方法在你想繼續(xù)進行,而其中一個失敗時可能會受到限制,而 Promise.allSettled() 允許你單獨處理每個 promise 的結(jié)果。
批量操作
當(dāng)處理批量操作時,其中的單個操作是獨立的,你可能不希望整個批次因操作失敗而失敗。
明智的決策
使用 Promise.allSettled() 后,你可以在獲得所有 promises 的結(jié)果后做出更明智的決策。例如,當(dāng)你從不同的 API 獲取數(shù)據(jù),其中一個失敗時,你可以決定是否繼續(xù)處理數(shù)據(jù)或提供帶有錯誤消息的通知。
增強的用戶體驗
通常,為用戶提供必要的部分結(jié)果和錯誤通知要比使用某些通用消息使整個操作失敗更好。Promise.allSettled() 使這種方法易于實施。
總結(jié)
總之,Promise.all() 在某些情況下可能很有價值,但 Promise.allSettled() 為大多數(shù)場景提供了更靈活和更有韌性的方法。