本篇文章和大家看看JavaScript如何處理并行請(qǐng)求？介紹一下JS處理并行請(qǐng)求的四種方式，希望對(duì)大家有所幫助！
需求
兩個(gè)異步請(qǐng)求同時(shí)發(fā)出，兩個(gè)請(qǐng)求都返回時(shí)再做處理
實(shí)現(xiàn)
這里的方法僅提供思路，只做請(qǐng)求成功處理
方法一
使用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
})方法二
自定義狀態(tài)，在回調(diào)中判斷返回狀態(tài)，待2個(gè)請(qǐng)求都有返回值時(shí)再做處理
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();這個(gè)地方有點(diǎn)問(wèn)題，因?yàn)閞equest2耗時(shí)較短，會(huì)先返回，也就是先執(zhí)行it.next(2000)，導(dǎo)致res1獲得了request2的返回值若使用co函數(shù)，則不會(huì)存在這個(gè)問(wèn)題，因?yàn)閏o是在promise.then函數(shù)中才執(zhí)行it.next()，相當(dāng)于it.next()是鏈?zhǔn)秸{(diào)用
generator使用co函數(shù)
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函數(shù)，就不需要生成it和執(zhí)行next方法了； co的原理其實(shí)也簡(jiǎn)單，就是遞歸執(zhí)行next，直到done為true； 如果next返回的value是Promise，則在then函數(shù)中執(zhí)行next，若不是Promise，直接執(zhí)行next函數(shù) 下面是co函數(shù)的簡(jiǎn)版手寫實(shí)現(xiàn)
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實(shí)現(xiàn)的
// setTimeout模擬異步請(qǐng)求，time為請(qǐng)求耗時(shí)
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
})()
