欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-02 09:55:30
...
本篇文章和大家看看JavaScript如何处理并行请求?介绍一下JS处理并行请求的四种方式,希望对大家有所帮助!

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如何处理并行请求?四种方式浅析的详细内容,更多请关注其它相关文章!