将多个Promise实例包装成一个新的Promise实例的方法

最新推荐文章于 2024-02-20 09:27:48 发布

acgCode

最新推荐文章于 2024-02-20 09:27:48 发布

阅读量665

点赞数 1

分类专栏： # JavaScript 前端文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/sayuonly/article/details/117563804

版权

本文介绍了Promise的all、allSettled、race和any方法，详细阐述了它们的工作原理及在不同情况下的行为表现，包括错误处理和异常情况。通过示例代码展示了各种情况下Promise实例的执行结果，帮助理解这些方法在处理并发任务时的差异。

摘要由CSDN通过智能技术生成

Promise对象提供了很多方法来实现对多个Promise实例的统一处理，常用的方法我会在下面一一说明。

Promise.all()

Promise.all() 当所有的 Promise 都执行完成后返回所有数据组成的数组，如果任一 Promise 失败，则直接返回该 Promise 的错误信息。

// Promise 传参封装
function test(arg) {
   
  const p = new Promise((resolve, reject) => {
   
    if (arg) {
   
      resolve(`result is ${
     arg}`);
    } else if (arg === 0) {
   
      throw new Error("result is 0");
    } else {
   
      reject("result is null");
    }
  });
  return p;
}

// 都成功
Promise.all([test(1), test(2), test(4)])
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

// test() reject
Promise.all([test(1), test(), test(0)])
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

// test(0) 抛出异常
Promise.all([test(1), test(0), test()])
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

输出结果为：

[ 'result is 1', 'result is 2', 'result is 4' ]
result is null
Error: result is 0

上面测试的 Promise 实例如果自己回调了又会如何呢？

// Promise 传参封装
function test(arg) {
   
  const p = new Promise((resolve, reject) => {
   
    if (arg) {
   
      resolve(`result is ${
     arg}`);
    } else if (arg === 0) {
   
      throw new Error("result is 0");
    } else {
   
      reject("result is null");
    }
  })
    .then((result) => {
   
      console.log(`Promise success: ${
     result}`);
      return result;
    })
    .catch((err) => {
   
      console.error(`Promise error: ${
     err}`);
      return err;
    });
  return p;
}
Promise.all([test(1), test(), test(0)])
  .then((data) => console.log(`all success: ${
     data}`))
  .catch