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怎么處理并行請求這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！