JavaScript は並列リクエストをどのように処理しますか? 4 つの方法の簡単な分析

この記事では、JavaScript が並列リクエストをどのように処理するかを説明します。 JS が並列リクエストを処理する 4 つの方法を紹介しました。皆さんのお役に立てれば幸いです。

#要件

2 つの非同期リクエストが同時に発行され、両方のリクエストが返されたときに処理が完了します。

実装

ここでのメソッドはアイデアを提供するだけであり、成功したリクエスト処理のみを処理します

##メソッド 1Promise を使用する.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 は時間がかかるので、先に戻ります。

つまり、next(2000) を先に実行して、 res1 が request2 の戻り値を取得します。 If co 関数を使用すると、この問題は発生しません。co は、promise.then 関数内で it.next() を実行します。これは、チェーン呼び出し

generator である it.next() と同等です。 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 関数を使用すると、それを生成して次のメソッドを実行する必要はありません。 co の原理は実際には単純です。つまり、done が true になるまで次を再帰的に実行します。 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 は並列リクエストをどのように処理しますか? 4 つの方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。