本篇文章和大家看看javascript如何处理并行请求？介绍一下js处理并行请求的四种方式，希望对大家有所帮助！
需求
两个异步请求同时发出，两个请求都返回时再做处理
实现
这里的方法仅提供思路，只做请求成功处理
方法一
立即学习“Java免费学习笔记（深入）”；
使用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如何处理并行请求？四种方式浅析的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2709344.html
