本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章和大家看看JavaScript如何处理并行请求?介绍一下JS处理并行请求的四种方式,希望对大家有所帮助!需求
两个异步请求同时发出,两个请求都返回时再做处理
实现
这里的方法仅提供思路,只做请求成功处理
方法一
使用Promise.all
1 2 3 4 5 6 7 8 9 10 11 12 13 | const startTime = new Date().getTime()
function request(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve(time)
}, time)
})
}
let request1 = request(3000)
let request2 = request(2000)
Promise.all([request1, request2]).then(res => {
console.log(res, new Date() - startTime)
})
|
方法二
自定义状态,在回调中判断返回状态,待2个请求都有返回值时再做处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | const startTime = new Date().getTime()
function request(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve(time)
}, time)
})
}
let state = [undefined, undefined]
let request1 = request(3000)
let request2 = request(2000)
request1.then(res => {
state[0] = res
process()
})
request2.then(res => {
state[1] = res
process()
})
function process() {
if (state[0] && state[1]) {
console.log(state, new Date() - startTime)
}
}
|
方法三
generator,yield
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const startTime = new Date().getTime()
function ajax(time, cb) {
setTimeout(() => cb(time), time)
}
function request(time) {
ajax(time, data => {
it.next(data);
})
}
function * main() {
let request1 = request(3000);
let request2 = request(2000);
let res1 = yield request1
let res2 = yield request2
console.log(res1, res2, new Date() - startTime)
}
let it = main();
it.next();
|
这个地方有点问题,因为request2耗时较短,会先返回,
也就是先执行it.next(2000),导致res1获得了request2的返回值
若使用co函数,则不会存在这个问题,因为co是在promise.then函数中才执行it.next(),相当于it.next()是链式调用
阅读剩余部分
相关阅读 >>
javascript怎么删除li
详解javascript获取元素的尺寸
ie如何关闭javascript脚本
javascript中时间怎么转时间戳
javascript怎么终止循环
一个完整的html对象是什么样的,如何生成?
javascript能做什么?
javascript操作dom对象之select(详细解答)
javascript怎么去掉空格符
vue实现可视化可拖放的自定义表单(代码示例)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JavaScript如何处理并行请求?四种方式浅析