集合!!!——前端Promise.all详解!

​​​​​​Promise.all使用

Promise.all()方法接受一个迭代对象(例如数组),迭代每一项值,如果是promise得到成功或失败的结果,如果有一个失败直接返回失败的promise的值,如果迭代值不是promise则内部会将其包装成promise。全部都是成功的promise则等待所有promise成功后返回一个promise。

例子

      const p1 = Promise.resolve(1);

      const p2 = Promise.resolve(2);

      const p3 = new Promise((resolve, reject) => {
        resolve(3);
      });

      const p4 = Promise.reject(4);

      const promiseAll1 = [p1, p2, p3];

      const promiseAll2 = [p1, p2, p3, p4];

      Promise.all(promiseAll1).then((res) => {
        console.log(res, "res"); // [1, 2, 3]
      });
      Promise.all(promiseAll2).catch((err) => {
        //p4失败了直接返回失败的promise的值
        console.log(err, "err"); // 4
      });

集合!!!——深耕

手写Promise.all的实现可以看我另一篇文章:【前端】手写Promise.all实现-CSDN博客

前端Promise.all方法用于将多个Promise实例包装成一个新的Promise实例。当传入的所有Promise实例都变为resolved状态时,Promise.all返回一个resolved状态的Promise,并将所有Promise的结果收集到一个数组中。如果其中任何一个Promise实例变为rejected状态,则Promise.all会立即返回一个rejected状态的Promise,并且不会等待其他未完成的Promise。 这个方法可以方便地处理多个异步操作,等待它们全部完成后再进行下一步处理。例如: ```javascript const promise1 = new Promise((resolve, reject) => { setTimeout(() => resolve('Promise 1 resolved'), 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => resolve('Promise 2 resolved'), 3000); }); const promise3 = new Promise((resolve, reject) => { setTimeout(() => resolve('Promise 3 resolved'), 1000); }); Promise.all([promise1, promise2, promise3]) .then(results => { console.log(results); // ['Promise 1 resolved', 'Promise 2 resolved', 'Promise 3 resolved'] }) .catch(error => { console.log(error); // 这里不会执行,因为没有Promise失败 }); ``` 在上面的例子中,我们创建了3个Promise实例并分别设置了不同的延迟时间来模拟异步操作。使用Promise.all方法将这3个Promise实例包装成一个新的Promise实例,并通过then方法来处理最终的结果。当所有的Promise实例都变为resolved状态时,then回调函数将被执行,并将结果数组打印出来。如果其中任何一个Promise实例变为rejected状态,catch回调函数将被执行,并打印出错误信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值