如何在 JavaScript 中使用 Promise.all()
JavaScript Promise 是編寫異步函數的最流行方法之一，它在操作完成或失敗時返回單個值。
什麼是 Promise.all()？
Promise.all() 是一個靜態方法（Promise API 的一部分），它並行執行許多 Promise，並等待它們全部解決。它將一組 Promise 作為輸入（一個可迭代對象）並返回一個 Promise，當可迭代參數中的所有 Promise 都已解析或其中任何一個 Promise 被拒絕時，該 Promise 將解析。
例如，假設您有幾個承諾會在所有完成後下載文件並處理內容。現在你有兩個選擇：
- 逐一運行這些 Promise 或將它們鏈接起來，並在數據可用時立即處理。
- 將它們全部傳遞給
Promise.all()作為一個數組並同時運行它們，並在所有承諾得到解決後處理數據。
第二種方法更好更快！ Promise.all() 一旦所有的承諾都得到解決或其中任何一個因錯誤而被拒絕，它本身就會返回一個承諾。
語法
const promise = Promise.all([Promise1, Promise2, Promise3, ...]);
// run all promises in parallel
promise.then(result => console.log(result))
.catch(error => console.error(`Error: ${error}`));
如您所見，它接受一組 promise（可以是任何可迭代的）並返回一個新的 promise。新的 Promise 會在所有 Promise 都解決並返回其結果數組時解析。
示例
讓我們看一個Promise.all()的例子 ：
// A simple promise that resolves after {ts}ms
const wait = (ts) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`Resolved in ${ts}ms`);
}, ts);
});
};
// Resolve as a normal promise
wait(1500).then(result => console.log(result)); // Resolved in 1500ms
wait(2000).then(result => console.log(result)); // Resolved in 2000ms
wait(3000).then(result => console.log(result)); // Resolved in 3000ms
// Promise.all
Promise.all([wait(1500), wait(2000), wait(3000)])
.then(results => console.log(results));
// ["Resolved in 1500ms", "Resolved in 2000ms", "Resolved in 3000ms"]
在上面的例子中，Promise.all() 等待 3 秒後穩定，並返回一個包含所有 promise 返回值的結果數組。
Promise.all() 的另一個有趣之處 是輸出數組保持與可迭代參數中指定的承諾相同的順序。這意味著第一個 promise 解析的值將存儲在數組的第一個元素中，第二個 promise 將解析為輸出數組的第二個元素，依此類推。
如果 Promise.all() 返回的承諾 拒絕，它被拒絕，原因來自輸入數組中第一個被拒絕的承諾。讓我們舉個例子來看看任何 promise 被拒絕會發生什麼：
const wait = (ts) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (ts > 2000) {
reject(`Rejected in ${ts}ms`);
} else {
resolve(`Resolved in ${ts}ms`);
}
}, ts);
});
};
// Promise.all
Promise.all([wait(1500), wait(2000), wait(3000)])
.then(results => console.log(results))
.catch(error => console.error(`Error while executing: ${error}`));
// Error while executing: Rejected in 3000ms
正如你在上面看到的，如果任何一個 Promise 失敗，其餘的 Promise 也會失敗。因此 Promise.all() 立即拒絕並出現錯誤。
對於某些操作，它可能不是預期的結果。即使有些承諾失敗了，您也可能希望執行所有承諾。可以通過為每個單獨的 Promise 處理拒絕來更改默認拒絕行為：
// a simple promise that resolves after {ts}ms
const wait = (ts) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (ts > 2000) {
reject(`Rejected in ${ts}ms`);
} else {
resolve(`Resolved in ${ts}ms`);
}
}, ts);
});
};
// Promise.all
Promise.all([
wait(1500).catch(err => err),
wait(2000).catch(err => err),
wait(3000).catch(err => err)
]).then(results => console.log(results));
// ["Resolved in 1500ms", "Resolved in 2000ms", "Rejected in 3000ms"]
結論
Promise.all() 有助於將許多 Promise 聚合成一個 Promise，並並行執行它們。它返回一個新的承諾，一旦可迭代參數中的所有承諾都被解決或其中任何一個被拒絕，它就會解決。它是在 JavaScript 中執行並發異步操作的最佳方式之一。
如果您有任何問題或想分享您的反饋，請隨時給我發推文。
快樂編碼😍
