本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于JavaScript中Promise.all和Promise.race方法的介绍(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
Promise.all() 方法接受一个包含 Promise 对象或普通值的数组(或其它可迭代对象)作为参数,并返回一个 Promise。当所有 Promise 对象都 resolve 后,将所有 resolve 值以数组形式作为 Promise.all() resolve 的结果。如果其中之一的 Promise 被 reject,立即以第一个 reject 的值作为 Promise.all() reject 结果。
在实际应用中,如果需要从几个接口获取数据,并且要在所有数据到达后才执行某些操作,就可以使用Promise.all()。
1
2
3
4
const
p1 =
new
Promise(
function
(resolve) { setTimeout(resolve, 200, 1) })
const
p2 = Promise.resolve(2)
const
p3 = 3
Promise.all([p1, p2, p3]).then(
function
(res) { console.log(res) })
以下是代码实现,需要一个计数器,来确认所有 promise 对象都已经 resolved,之后返回结果。需要一个数组,按顺序记录返回结果。如果使用类似 for (var i = 0; i < iterable[i]; i++) 的方式遍历,为避免闭包只能传入变量引用的问题,需要嵌套一层自执行函数。这里使用 for ... in 循环,使函数可以支持除数组外的其它可迭代对象,如数据结构 Set。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const
all =
function
(iterable) {
return
new
Promise(
function
(resolve, reject) {
let
count
= 0, ans =
new
Array(
count
)
for
(
const
i in iterable) {
const
v = iterable[i]
if
(typeof v ===
'object'
&& typeof v.then ===
'function'
) {
v.then(
function
(res) {
ans[i] = res
if
(--
count
=== 0) resolve(ans)
}, reject)
count
++
}
else
{
ans[i] = v
}
}
})
}
const
p1 =
new
Promise(
function
(resolve) { setTimeout(resolve, 200, 1) })
const
p2 = Promise.resolve(2)
const
p3 = 3
all([p1, p2, p3]).then(
function
(res) { console.log(res) })
同 Promise.all(),Promise.race() 方法接受一个包含 Promise 对象或普通值的数组(或其它可迭代对象)作为参数,并返回一个 Promise。一旦其中之一的 Promise 对象 resolve 以后,立即把 resolve 的值作为 Promise.race() resolve 的结果。如果其中之一的对象 reject,Promise.race也会立即 reject。
在实际应用中,如果可以从几个接口获取相同的数据,哪个接口数据先到就先用哪个,就可以使用Promise.race(),所需时间等于其中最快的那个接口。下面是代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const
race =
function
(iterable) {
return
new
Promise(
function
(resolve, reject) {
for
(
const
i in iterable) {
const
v = iterable[i]
if
(typeof v ===
'object'
&& typeof v.then ===
'function'
) {
v.then(resolve, reject)
}
else
{
resolve(v)
}
}
})
}
const
p1 =
new
Promise(
function
(resolve) { setTimeout(resolve, 200, 1) })
const
p2 =
new
Promise(
function
(resolve) { setTimeout(resolve, 100, 2) })
race([p1, p2]).then(
function
(res) { console.log(res) })
以上就是JavaScript中Promise.all和Promise.race方法的介绍(附代码) 的详细内容,更多文章请关注木庄网络博客 !
相关阅读 >>
angular实现只执行正在开发的新单元测试
使用docker高效部署node.js 应用的方法介绍
javascript创建对象(3种方式)
深入了解node.js 中的koa框架
javascript sort方法怎么排序
javascript url怎么隐藏
影响页面加载时间的5个常见错误
javascript弹出框有哪些
augularjs基础入门与实践
了解nodejs中的事件和事件循环
更多相关阅读请进入《node.js 》频道 >>
¥83.86元 人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JavaScript中Promise.all和Promise.race方法的介绍(附代码)