JavaScript怎么处理并行请求
这篇文章主要讲解了“JavaScript怎么处理并行请求”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript怎么处理并行请求”吧!
成都创新互联公司专注于东明网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供东明营销型网站建设,东明网站制作、东明网页设计、东明网站官网定制、成都小程序开发服务,打造东明网络公司原创品牌,更为您提供东明网站排名全网营销落地服务。
需求
两个异步请求同时发出,两个请求都返回时再做处理
实现
这里的方法仅提供思路,只做请求成功处理
方法一
使用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 })()
感谢各位的阅读,以上就是“JavaScript怎么处理并行请求”的内容了,经过本文的学习后,相信大家对JavaScript怎么处理并行请求这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
分享题目:JavaScript怎么处理并行请求
文章转载:http://pwwzsj.com/article/ihdced.html