Promise 如何正确的使用 allSettled 方法

在前端开发中，异步操作是非常常见的。Promise 是一种处理异步操作的方式，可以更好的控制异步操作的流程和结果。其中，Promise.allSettled() 方法可以同时处理多个异步操作，并返回所有操作的结果，无论成功或失败。但是，正确使用 allSettled() 方法需要注意一些细节。

什么是 allSettled 方法

Promise.allSettled() 方法返回一个 Promise 对象，该对象在所有给定的 Promise 都已经 resolved 或 rejected 后，才会 resolve。返回的结果是一个数组，数组中的每个元素都是一个对象，表示对应的 Promise 结果。

Promise.allSettled([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.log(error));

如何正确使用 allSettled 方法

1. 处理异常情况

在使用 Promise.allSettled() 方法时，需要注意异常情况的处理。如果其中一个 Promise 被 rejected，allSettled() 方法也会被 rejected。因此，需要使用 .catch() 方法来处理异常情况。

Promise.allSettled([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.log(error));

2. 处理结果

allSettled() 方法返回的结果是一个数组，数组中的每个元素都是一个对象，表示对应的 Promise 结果。因此，需要使用 .then() 方法来处理结果。

// javascriptcn.com 代码示例
Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.log(result.reason);
      }
    });
  })
  .catch(error => console.log(error));

3. 处理超时

在使用 Promise.allSettled() 方法时，需要注意可能会出现超时的情况。如果其中一个 Promise 没有在规定时间内完成，allSettled() 方法也会被 rejected。因此，需要使用 Promise.race() 方法来处理超时情况。

// javascriptcn.com 代码示例
Promise.allSettled([promise1, promise2, promise3, Promise.race([promise4, timeoutPromise])])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.log(result.reason);
      }
    });
  })
  .catch(error => console.log(error));

示例代码

// javascriptcn.com 代码示例
// 异步操作1
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1 resolved');
  }, 1000);
});

// 异步操作2
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('promise2 rejected');
  }, 2000);
});

// 异步操作3
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise3 resolved');
  }, 3000);
});

// 异步操作4
const promise4 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise4 resolved');
  }, 4000);
});

// 超时操作
const timeoutPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('timeout');
  }, 5000);
});

// 使用 allSettled 方法处理异步操作
Promise.allSettled([promise1, promise2, promise3, Promise.race([promise4, timeoutPromise])])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.log(result.reason);
      }
    });
  })
  .catch(error => console.log(error));

总结

Promise.allSettled() 方法可以同时处理多个异步操作，并返回所有操作的结果，无论成功或失败。在使用该方法时，需要注意异常情况的处理、结果的处理和超时的处理。合理使用 allSettled() 方法，可以更好的控制异步操作的流程和结果。

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