JavaScript Promise.all()
2022/4/17 20:12:47
本文主要是介绍JavaScript Promise.all(),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
今天我们学习使用Promise.all()
这个静态方法来聚合多个异步任务的结果。
Promise.all()
函数接受一个具有多个promise
的数组作为参数,并返回一个promise对象。
什么时候返回?
- 当数组中的所有Promise全部被
resolve
或者reject
Promise.all的语法:
Promise.all([promise1, promise2, promise3]) .then(console.log) .catch(console.log)
首先传入一个数组,数组中的每个值为promise对象。
如果数组中的每个promise都被resolve,则Promise.all会返回一个新的promise对象,并reslove一个数组,里面是每个promise返回的值,同样按照传入的顺序。
如果数组中的某个promise被reject,Promise.all也会返回新的promise对象,reject第一个失败的promise所返回的值,如果后面的promise也有失败也不会返回。
当我们处理同时多个异步请求的时候,Promise.all非常的有用。
Promise.all() 示例代码
看明白代码就会了
成功resolve Promise示例
下面的3个promise分别在第1、2、3秒的时候成功返回数字10、20、30。我们用setTimeout来模拟异步操作。
我需要将这个3个promise所返回的结果进行计算总和。
如果使用昨天的链式调用的话,结果将在1+2+3,6秒后才能返回结果。
但今天我们使用Promise.all,同时处理3个异步操作,最长时间的是p3的promise,所以3秒后就可以计算出结果。
const p1 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第一个promise被resolve'); resolve(10); }, 1 * 1000); }); const p2 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第二个promise被resolve'); resolve(20); }, 2 * 1000); }); const p3 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第三个promise被resolve'); resolve(30); }, 3 * 1000); }); Promise.all([p1, p2, p3]) .then(results => { const total = results.reduce((p, c) => p + c); console.log(`返回结果: ${results}`); console.log(`计算总数: ${total}`); }); // 输出: // 第一个promise被resolve // 第二个promise被resolve // 第三个promise被resolve // 返回结果: 10,20,30 // 计算总数: 60
当所有的promise被resolve时,Promise.all
的 then 会被调用,results 为p1,p2,p3
结果组成的数组。
最后使用reduce方法求10+20+30
的结果。
失败reject Promise示例
有成功就会有失败,下面来看看如果有失败的异步操作怎么办
const p1 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第一个promise被resolve'); resolve(10); }, 1 * 1000); }); const p2 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第二个promise被reject'); reject('失败'); }, 2 * 1000); }); const p3 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第三个promise被resolve'); resolve(30); }, 3 * 1000); }); Promise.all([p1, p2, p3]) .then(console.log) .catch(console.log); // 输出: // 第一个promise被resolve // 第二个promise被reject // 失败 // 第三个promise被resolve
这个例子中,p1在1秒后成功返回,p2在2秒后失败,p3在3秒后成功返回。
再看Promise.all
,catch方法执行并打印出p2的reject返回值,因为promise中有失败,所以then方法并不会执行。
如果p3也失败呢?
const p1 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第一个promise被resolve'); resolve(10); }, 1 * 1000); }); const p2 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第二个promise被reject'); reject('p2失败'); }, 2 * 1000); }); const p3 = new Promise((resolve, reject) => { setTimeout(() => { console.log('第三个promise被reject'); reject('p3失败'); }, 3 * 1000); }); Promise.all([p1, p2, p3]) .then(console.log) .catch(console.log); // 输出: // 第一个promise被resolve // 第二个promise被reject // p2失败 // 第三个promise被reject
可以看到结果还是相同,catch只打印了p2错误的值,并没有返回p3的reject的值,说明Promise.all的只会reject第一个失败的值,后面的失败返回并不会传入到catch中。
这在平时的使用中要注意,如果想要拿到所有的失败返回值,用reject是做不到。
好,今天的Promise.all学习笔记到这,明天讲讲Promise.race(),明天见。
这篇关于JavaScript Promise.all()的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性
- 2024-05-29哪些无用敏捷指标正在破坏敏捷转型?
- 2024-05-29鸿蒙原生应用再新丁!新华社 入局鸿蒙
- 2024-05-29设计模式 之 迭代器模式(Iterator)