Promise.allSettled 详解

Promise.allSettled() 是一个较新的 API，用于处理多个 Promise 对象的状态。它会等待所有 Promise 对象都执行完毕，不论是否成功，最后返回一个包含所有 Promise 对象状态的数组。

基本语法

Promise.allSettled([promise1, promise2, promise3, ...])
  .then(results => {
    // do something with results
  })
  .catch(error => {
    // handle error
  });

参数

参数为一个 Promise 对象的数组。如果数组中有任意一个 Promise 对象返回的是 reject 状态，Promise.allSettled() 仍会等待所有 Promise 对象执行完毕后返回一个状态包含所有 Promise 对象的数组。

返回值

返回值为一个 Promise 对象，Promise 对象的状态为 fulfilled。其中，resolve 的返回值是一个数组，包含所有 Promise 对象的状态。

使用场景

在实际开发中，我们经常需要处理多个 Promise 对象，并且需要等待所有 Promise 对象都执行完毕后再进行下一步操作。

比如，我们需要同时加载多张图片，并在全部加载完成后显示相关内容。这个时候就可以使用 Promise.allSettled() 函数。

示例代码

下面是一个使用 Promise.allSettled() 函数处理多个 Promise 对象的示例代码。

const imageUrls = [...];

const imagePromises = imageUrls.map((url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load image ${url}`));
    img.src = url;
  });
});

Promise.allSettled(imagePromises)
  .then((results) => {
    const succeededImages = results.filter((result) => result.status === "fulfilled").map((result) => result.value);
    // do something with succeededImages
  })
  .catch((error) => {
    // handle error
  });

以上代码中，我们首先将图片地址存储在一个数组中，然后使用 map() 方法将每个图片地址封装成一个 Promise 对象。

接着，使用 Promise.allSettled() 函数等待所有 Promise 对象执行完毕后，将返回的状态数组过滤出成功加载的图片，然后将图片数组传递到下一步操作中。

总结

通过上面的讲解和示例代码，我们了解了 Promise.allSettled() 函数的基本语法，参数，返回值，使用场景以及示例代码。

Promise.allSettled() 函数在处理多个 Promise 对象方面非常实用，可以帮助我们提高代码编写效率和维护性。在实际开发中，我们可以根据具体需求，使用对应的 Promise API，达到更好的代码运行效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b35493add4f0e0ffc6483a