JavaScript如何处理并行请求？四种方式浅析（js并行）

本篇文章以及人人看看JavaScript怎样解决并行申请？介绍一下JS解决并行申请的四种形式，希望对于人人有所帮助！

需要

两个异步申请同时收回，两个申请都返回时再做解决

实现

这里的方法仅供应思路，只做申请胜利解决

方法一

应用Promise.all

conststartTime=newDate().getTime()
functionrequest(time){
returnnewPromise(resolve=>{
setTimeout(()=>{
resolve(time)
},time)
})
}
letrequest1=request(3000)
letrequest2=request(2000)
Promise.all([request1,request2]).then(res=>{
console.log(res,newDate()-startTime)//[3000,2000]3001
})

方法二

自界说状态，在回调中坚定返回状态，待2个申请都有返回值时再做解决

conststartTime=newDate().getTime()
functionrequest(time){
returnnewPromise(resolve=>{
setTimeout(()=>{
resolve(time)
},time)
})
}
letstate=[undefined,undefined]
letrequest1=request(3000)
letrequest2=request(2000)
request1.then(res=>{
state[0]=res
process()
})
request2.then(res=>{
state[1]=res
process()
})
functionprocess(){
if(state[0]&&state[1]){
console.log(state,newDate()-startTime)//[3000,2000]3001
}
}

方法三

generator，yield

conststartTime=newDate().getTime()
functionajax(time,cb){
setTimeout(()=>cb(time),time)
}
functionrequest(time){
ajax(time,data=>{
it.next(data);
})
}
function*main(){
letrequest1=request(3000);
letrequest2=request(2000);
letres1=yieldrequest1
letres2=yieldrequest2
console.log(res1,res2,newDate()-startTime)//200030003001
}
letit=main();
it.next();

这其中央有点问题，因为request2耗时较短，会先返回，也便是先实行it.next(2000)，以致res1获取了request2的返回值若应用co函数，则不会存在这个问题，因为co是在promise.then函数中才实行it.next()，相当于it.next()是链式调用

generator应用co函数

constco=require('co')
conststartTime=newDate().getTime()
functionrequest(time){
returnnewPromise(resolve=>{
setTimeout(()=>{
resolve(time)
},time)
})
}
co(function*(){
letrequest1=request(3000);
letrequest2=request(2000);
letres1=yieldrequest1
letres2=yieldrequest2
console.log(res1,res2,newDate()-startTime)//300020003001
})

有了co函数，就不需要天生it以及实行next方法了；co的情理实在也轻易，便是递归实行next，直到done为true；如果next返回的value是Promise，则在then函数中实行next，若不是Promise，间接实行next函数下面是co函数的简版手写实现

functionco(func){
letit=func()
lett=it.next()
next()

functionnext(){
if(t.done)return
if(t.valueinstanceofPromise){
t.value.then(res=>{
t=it.next(res)
next()
})
}else{
t=it.next(t.value)
next()
}
}
}

方法四

有了generator，很轻易想到async/await，终究async/await便是由generator实现的

//setTimeout模拟异步申请，time为申请耗时
conststartTime=newDate().getTime()
functionrequest(time){
returnnewPromise(resolve=>{
setTimeout(()=>{
resolve(time)
},time)
})
}
(asyncfunction(){
letrequest1=request(3000)
letrequest2=request(2000)
letres1=awaitrequest1
console.log(res1,newDate()-startTime)//30003001
letres2=awaitrequest2
console.log(res2,newDate()-startTime)//20003005
})()

本文链接：https://addon.ciliseo.com/javascript-ru-he-chu-li-bing-xing-qing-qiu-si-zhong-fang-shi-qian-xi.html