所有分类
  • 所有分类
  • 织梦模板

JavaScript如何处理并行请求?四种方式浅析

本篇文章和大家看看JavaScript如何处理并行请求?介绍一下JS处理并行请求的四种方式,希望对大家有所帮助!

 

需求

两个异步请求同时发出,两个请求都返回时再做处理

实现

这里的方法仅提供思路,只做请求成功处理

方法一

使用Promise.all

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) // [ 3000, 2000 ] 3001
})

方法二

自定义状态,在回调中判断返回状态,待2个请求都有返回值时再做处理

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) // [ 3000, 2000 ] 3001
}
}

方法三

generator,yield

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) // 2000 3000 3001
}
let it = main();
it.next();

这个地方有点问题,因为request2耗时较短,会先返回,也就是先执行it.next(2000),导致res1获得了request2的返回值若使用co函数,则不会存在这个问题,因为co是在promise.then函数中才执行it.next(),相当于it.next()是链式调用

generator使用co函数

const co = require(‘co’)
const startTime = new Date().getTime()
function request (time) {
return new Promise(resolve => {
setTimeout(() => {
resolve(time)
}, time)
})
}
co(function* () {
let request1 = request(3000);
let request2 = request(2000);
let res1 = yield request1
let res2 = yield request2
console.log(res1, res2, new Date() – startTime) // 3000 2000 3001
})

有了co函数,就不需要生成it和执行next方法了; co的原理其实也简单,就是递归执行next,直到done为true; 如果next返回的value是Promise,则在then函数中执行next,若不是Promise,直接执行next函数 下面是co函数的简版手写实现

function co(func) {
let it = func()
let t = it.next()
next()

function next() {
if (t.done) return
if (t.value instanceof Promise) {
t.value.then(res => {
t = it.next(res)
next()
})
} else {
t = it.next(t.value)
next()
}
}
}

方法四

有了generator,很容易想到async/await,毕竟async/await就是由generator实现的

// setTimeout模拟异步请求,time为请求耗时
const startTime = new Date().getTime()
function request (time) {
return new Promise(resolve => {
setTimeout(() => {
resolve(time)
}, time)
})
}
(async function () {
let request1 = request(3000)
let request2 = request(2000)
let res1 = await request1
console.log(res1, new Date() – startTime) // 3000 3001
let res2 = await request2
console.log(res2, new Date() – startTime) // 2000 3005
})()

常见问题
所有VIP可以商用吗,会不会有版权问题?
本站提供的源码大部分可以作为源码开发参考和学习,部分开源可商用。
账号可以分享给其他人使用吗?
您好,账号禁止共享,我们有验证机制的,会自动封号处理,谢谢配合。
如果遇到问题怎么联系解决呢?
最快的途径是在导航菜单选择提交【售后】会在24小时处理
下载的源码可以使用吗?
我们会在显著的地方表明【已测试】,显示已测试的都是小编测试过 。
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5.如有侵权请联系客服邮件770973008@qq.com
原文链接:https://www.56admin.com/18893.html,转载请注明出处。
0
分享海报

评论0

请先
九年老站,质量有保证,90%亲自测试!优惠原价199模板币终生SVIP,优惠价68模板币! 数量有限! 购买SVIP 所有资源免积分下载,畅享无忧!
显示验证码
没有账号?注册  忘记密码?