挖掘Promise.allSettled()的奥秘：掌控异步操作的新利器

2024-02-21 02:39:58

在现代JavaScript开发中，Promise已成为处理异步操作的利器。为了进一步提升开发效率，Promise.allSettled()应运而生，它能够同时处理多个Promise，并返回一个包含所有Promise状态的对象数组。这篇文章将带您深入了解Promise.allSettled()的工作原理，并提供其实际应用指南，帮助您轻松驾驭异步编程的复杂性。

Promise.allSettled()的魅力剖析

Promise.allSettled()函数接受一个Promise数组作为参数，并返回一个新的Promise。这个新的Promise会在所有给定的Promise都已完成(fulfilled或rejected)后才完成。一旦新的Promise完成，它将返回一个对象数组，其中每个对象包含一个Promise的状态和结果。

Promise.allSettled()的独特之处在于，它不会像Promise.all()那样，在遇到第一个rejected的Promise时就立即reject。相反，它会等待所有Promise都完成，然后才以一个包含所有Promise状态的对象数组来resolve。这种行为使得Promise.allSettled()非常适合处理并行异步操作，因为您可以轻松地检查所有Promise的结果，而无需担心其中一个Promise的失败会影响其他Promise的执行。

揭秘Promise.allSettled()的使用指南

场景适用性：
Promise.allSettled()最适合用于需要同时处理多个异步操作的场景，例如：

并行获取多个API响应
同时上传多个文件
批量处理任务
轮询多个资源

语法结构：

Promise.allSettled(promises)
  .then((results) => {
    // 处理结果
  });

结果处理：
Promise.allSettled()返回的Promise在resolve后，会携带一个包含所有Promise状态的对象数组。每个对象包含以下属性：

status： Promise的状态，可能是"fulfilled"或"rejected"。
value： 如果Promise是fulfilled，则包含结果值；如果Promise是rejected，则包含错误信息。

错误处理：
Promise.allSettled()不会像Promise.all()那样，在遇到第一个rejected的Promise时就立即reject。它会等待所有Promise都完成，然后才以一个包含所有Promise状态的对象数组来resolve。这意味着您需要在处理结果时，手动检查每个Promise的状态，并根据需要处理错误情况。

进阶应用：巧用Promise.allSettled()

除了上述基本用法外，Promise.allSettled()还可以与其他JavaScript特性结合使用，实现更复杂的异步编程需求。

超时控制：

const promises = [
  fetch('https://example.com/api/1'),
  fetch('https://example.com/api/2'),
  fetch('https://example.com/api/3'),
];

Promise.allSettled(promises)
  .then((results) => {
    const successfulRequests = results.filter((result) => result.status === "fulfilled");
    const failedRequests = results.filter((result) => result.status === "rejected");

    console.log(`Successful requests: ${successfulRequests.length}`);
    console.log(`Failed requests: ${failedRequests.length}`);
  });

在这个例子中，我们使用Promise.allSettled()来同时获取三个API响应。如果任何一个请求在10秒内没有完成，我们将将其标记为失败。

并发请求限制：

const MAX_CONCURRENT_REQUESTS = 3;

const makeRequest = (url) => {
  return fetch(url)
    .then((response) => response.json())
    .catch((error) => {
      throw new Error(`Request failed: ${error}`);
    });
};

const requestQueue = [];
const results = [];

for (let i = 0; i < urls.length; i++) {
  const url = urls[i];

  requestQueue.push(() => {
    return makeRequest(url)
      .then((result) => {
        results.push(result);
      })
      .catch((error) => {
        results.push(error);
      });
  });
}

const executeRequests = () => {
  const currentRequests = requestQueue.splice(0, MAX_CONCURRENT_REQUESTS);
  Promise.allSettled(currentRequests)
    .then(() => {
      if (requestQueue.length > 0) {
        executeRequests();
      }
    });
};

executeRequests();