一行代碼干掉 Promise.all！JavaScript 異步編程的終極簡化！
作者：story
長期以來，Promise.all() 一直是我們處理并發(fā) Promise 的首選方法，但它存在一個致命缺陷：一旦任何一個 Promise 被拒絕（rejected），整個操作就會失敗。
處理異步操作已經(jīng)成為了 JavaScript 日常編碼的核心部分。隨著應(yīng)用復(fù)雜度的增加，我們經(jīng)常需要并發(fā)執(zhí)行多個異步任務(wù)并合理處理它們的結(jié)果。長期以來，Promise.all() 一直是我們處理并發(fā) Promise 的首選方法，但它存在一個致命缺陷：一旦任何一個 Promise 被拒絕（rejected），整個操作就會失敗。
Promise.all 的局限性
讓我們先回顧一下 Promise.all() 的工作方式及其局限性：
const promises = [
fetch('/api/users'),
fetch('/api/products'),
fetch('/api/orders')
];
Promise.all(promises)
.then(results => {
// 處理所有成功結(jié)果
const [users, products, orders] = results;
// 進(jìn)一步處理數(shù)據(jù)
})
.catch(error => {
// 如果任何一個 Promise 失敗，就會執(zhí)行這里
console.error('至少有一個請求失敗:', error);
// 但我們不知道哪些請求成功了，哪些失敗了
});這種方法的主要問題在于：
- 任何一個 Promise 失敗都會導(dǎo)致整個操作失敗
- 你無法知道哪些操作成功，哪些失敗
- 你無法獲取成功操作的結(jié)果
在實(shí)際應(yīng)用中，我們通常希望即使某些操作失敗，也能繼續(xù)處理成功的結(jié)果。例如，在加載儀表板組件時，即使某個組件的數(shù)據(jù)獲取失敗，我們也希望顯示其他組件。
Promise.allSettled() 解決了上述所有問題。它會等待所有 Promise 完成（無論成功或失?。⒎祷匾粋€包含每個 Promise 結(jié)果的數(shù)組：
const promises = [
fetch('/api/users').then(r => r.json()),
fetch('/api/products').then(r => r.json()),
fetch('/api/orders').then(r => r.json())
];
Promise.allSettled(promises)
.then(results => {
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`Promise ${index} 成功:`, result.value);
} else {
console.log(`Promise ${index} 失敗:`, result.reason);
}
});
// 你可以處理所有成功的結(jié)果，同時了解哪些失敗了
const successfulData = results
.filter(result => result.status === 'fulfilled')
.map(result => result.value);
// 處理成功獲取的數(shù)據(jù)
processData(successfulData);
});Promise.allSettled 返回值結(jié)構(gòu)
Promise.allSettled() 的返回值是一個數(shù)組，每個元素對應(yīng)一個 Promise 的結(jié)果，具有以下結(jié)構(gòu)：
- 對于成功的 Promise：{ status: 'fulfilled', value: 結(jié)果值 }
- 對于失敗的 Promise：{ status: 'rejected', reason: 錯誤原因 }
這種統(tǒng)一的結(jié)構(gòu)使得處理結(jié)果變得簡單明了。尤其在需要并發(fā)執(zhí)行多個獨(dú)立異步操作，并且希望無論個別操作成功與否都能獲取完整結(jié)果的場景中，Promise.allSettled() 無疑是最佳選擇。它使我們能夠構(gòu)建更具彈性的應(yīng)用程序，優(yōu)雅地處理現(xiàn)實(shí)世界中不可避免的錯誤和異常情況。
責(zé)任編輯：趙寧寧
來源：
JavaScript
