ホームページ > 記事 > ウェブフロントエンド > 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、yieldconst 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();
何か問題がありますここでは、
つまり、next(2000) を先に実行して、 res1 が request2 の戻り値を取得します。
If co 関数を使用すると、この問題は発生しません。co は、promise.then 関数内で it.next() を実行します。これは、チェーン呼び出し
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 サイトの他の関連記事を参照してください。