深入理解 Promise.all 和 Promise.allSettled：特性、區(qū)別與應(yīng)用場景

在 JavaScript 中，Promise.all 和 Promise.allSettled 是處理多個 Promise 的常用方法。它們都可以用于并發(fā)執(zhí)行多個異步操作，但在行為、返回值和應(yīng)用場景上有顯著區(qū)別。本文將深入探討它們的特性、區(qū)別以及如何在實(shí)際開發(fā)中選擇合適的方法。

1. Promise.all 的特性

1.1 基本行為

• Promise.all 接收一個 Promise 數(shù)組（或可迭代對象），并等待所有 Promise 完成。
• 如果所有 Promise 都成功（fulfilled），則返回一個結(jié)果數(shù)組，數(shù)組中的每個元素對應(yīng)傳入的 Promise 的結(jié)果。
• 如果任何一個 Promise 失敗（rejected），則立即拋出錯誤，并忽略其他 Promise 的結(jié)果。

1.2 返回值

• 成功時：返回一個結(jié)果數(shù)組，結(jié)果的順序與傳入的 Promise 順序一致。
• 失敗時：返回第一個失敗的 Promise 的錯誤。

1.3 示例

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.reject('Error'),
];
Promise.all(promises)
  .then(results => console.log(results)) // 不會執(zhí)行
  .catch(error => console.error(error)); // 輸出: Error

1.4 適用場景

• 當(dāng)你需要所有 Promise 都成功才能繼續(xù)時。
• 例如：多個請求都成功后才能進(jìn)行下一步操作。

2. Promise.allSettled 的特性

2.1 基本行為

• Promise.allSettled 接收一個 Promise 數(shù)組（或可迭代對象），并等待所有 Promise 完成（無論成功或失?。?。
• 返回一個結(jié)果數(shù)組，數(shù)組中的每個元素是一個對象，包含 Promise 的狀態(tài)（fulfilled 或 rejected）和結(jié)果（或錯誤）。

2.2 返回值

返回一個數(shù)組，數(shù)組中的每個元素是一個對象，包含以下屬性：

• status：Promise 的狀態(tài)，'fulfilled' 或 'rejected'。
• value（如果狀態(tài)是 fulfilled）：Promise 的結(jié)果。
• reason（如果狀態(tài)是 rejected）：Promise 的錯誤原因。

2.3 示例

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.reject('Error'),
];
Promise.allSettled(promises).then(results => {
  console.log(results);
});

輸出：

[
  { status: 'fulfilled', value: 1 },
  { status: 'fulfilled', value: 2 },
  { status: 'rejected', reason: 'Error' }
]

2.4 適用場景

• 當(dāng)你需要知道所有 Promise 的最終狀態(tài)（無論成功或失?。r。
• 例如：批量處理請求，需要知道每個請求的結(jié)果。

3. Promise.all 和 Promise.allSettled 的區(qū)別

特性Promise.allPromise.allSettled對失敗的處理任何一個 Promise 失敗，立即拋出錯誤等待所有 Promise 完成，無論成功或失敗返回值成功時返回結(jié)果數(shù)組，失敗時返回錯誤返回一個包含所有 Promise 狀態(tài)的對象數(shù)組返回值順序嚴(yán)格按照傳入的 Promise 順序嚴(yán)格按照傳入的 Promise 順序適用場景所有 Promise 必須成功需要知道所有 Promise 的最終狀態(tài)是否捕獲失敗的結(jié)果否是

4. 返回值順序的保證

無論是 Promise.all 還是 Promise.allSettled，它們的返回值都會嚴(yán)格按照傳入的 Promise 順序返回結(jié)果，無論這些 Promise 的實(shí)際完成順序如何。

4.1 Promise.all 的順序保證

• 即使某些 Promise 先完成，結(jié)果的順序仍然與傳入的 Promise 順序一致。
• 如果任何一個 Promise 失敗，Promise.all 會立即拋出錯誤，但在此之前已完成的結(jié)果仍然會按照順序返回。

示例：

const promises = [
  new Promise(resolve => setTimeout(() => resolve(1), 1000)), // 第1個
  new Promise(resolve => setTimeout(() => resolve(2), 500)),  // 第2個
  new Promise(resolve => setTimeout(() => resolve(3), 200)),  // 第3個
];
Promise.all(promises)
  .then(results => console.log(results)) // 輸出: [1, 2, 3]
  .catch(error => console.error(error));

4.2 Promise.allSettled 的順序保證

無論 Promise 是成功還是失敗，Promise.allSettled 都會等待所有 Promise 完成，并按照傳入的順序返回結(jié)果。 示例：

const promises = [
  new Promise(resolve => setTimeout(() => resolve(1), 1000)), // 第1個
  new Promise((resolve, reject) => setTimeout(() => reject('Error'), 500)), // 第2個
  new Promise(resolve => setTimeout(() => resolve(3), 200)),  // 第3個
];
Promise.allSettled(promises)
  .then(results => console.log(results));

輸出：

[
  { status: 'fulfilled', value: 1 }, // 第1個 Promise 的結(jié)果
  { status: 'rejected', reason: 'Error' }, // 第2個 Promise 的結(jié)果
  { status: 'fulfilled', value: 3 } // 第3個 Promise 的結(jié)果
]

5. 如何選擇使用哪個方法？

5.1 使用 Promise.all

• 當(dāng)你需要所有 Promise 都成功才能繼續(xù)時。
• 例如：多個請求都成功后才能進(jìn)行下一步操作。

5.2 使用 Promise.allSettled

• 當(dāng)你需要知道所有 Promise 的最終狀態(tài)（無論成功或失?。r。
• 例如：批量處理請求，需要知道每個請求的結(jié)果。

6. 實(shí)際應(yīng)用示例

6.1 使用 Promise.all

const urls = ['/api/data1', '/api/data2', '/api/data3'];
const fetchData = async (url) => {
  const response = await fetch(url);
  return response.json();
};
try {
  const results = await Promise.all(urls.map(url => fetchData(url)));
  console.log('All requests succeeded:', results);
} catch (error) {
  console.error('One or more requests failed:', error);
}

6.2 使用 Promise.allSettled

const urls = ['/api/data1', '/api/data2', '/api/data3'];
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    return { status: 'fulfilled', value: await response.json() };
  } catch (error) {
    return { status: 'rejected', reason: error };
  }
};
const results = await Promise.allSettled(urls.map(url => fetchData(url)));
console.log('All requests completed:', results);

7. 總結(jié)

• Promise.all：適合所有 Promise 必須成功的場景，失敗時會立即拋出錯誤。
• Promise.allSettled：適合需要知道所有 Promise 最終狀態(tài)的場景，無論成功或失敗。
• 兩者的返回值都會嚴(yán)格按照傳入的 Promise 順序返回結(jié)果。

根據(jù)你的需求選擇合適的方法，可以更高效地處理并發(fā)異步操作！

到此這篇關(guān)于深入理解JS中 Promise.all 和 Promise.allSettled 特性和區(qū)別應(yīng)用場景分析的文章就介紹到這了,更多相關(guān)js Promise.all 和 Promise.allSettled內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論