JavaScript는 병렬 요청을 어떻게 처리합니까? 네 가지 방법에 대한 간략한 분석

이 글에서는 JavaScript가 병렬 요청을 어떻게 처리하는지 살펴보겠습니다. JS가 병렬 요청을 처리하는 네 가지 방법을 소개합니다. 모두에게 도움이 되기를 바랍니다!

Requirements

두 개의 비동기 요청이 동시에 전송되고, 두 요청이 모두 반환되면 처리가 완료됩니다.

Implementation

여기서 메서드는 아이디어만 제공하고 요청만 성공적으로 처리합니다

방법 1

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
  }
}

방법 3

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 함수를 사용하면 이를 생성하고 next 메서드를 실행할 필요가 없습니다. co의 원리는 실제로 간단합니다. 즉, 완료될 때까지 다음을 반복적으로 실행합니다. next가 반환한 값이 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()
    }
  }
}

방법 4

제너레이터를 사용하면 async/await를 생각하기 쉽습니다. 결국 async/await는 제너레이터에 의해 구현됩니다

// 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는 병렬 요청을 어떻게 처리합니까? 네 가지 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!