Heim > Artikel > Web-Frontend > Wie geht JavaScript mit parallelen Anfragen um? Kurze Analyse von vier Methoden
In diesem Artikel werfen wir einen Blick darauf, wie JavaScript parallele Anfragen verarbeitet. Ich hoffe, dass die Vorstellung der vier Möglichkeiten, mit denen JS parallele Anfragen bearbeitet, für alle hilfreich sein wird!
Zwei asynchrone Anfragen werden gleichzeitig gesendet und die Verarbeitung ist abgeschlossen, wenn beide Anfragen zurückkehren Methode 1
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 })
Methode 2Passen Sie den Status an, beurteilen Sie den Rückgabestatus im Rückruf und warten Sie, bis beide Anforderungen Rückgabewerte haben, bevor Sie sie verarbeiten
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 } }
Methode 3
Generator, Ertragconst 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();
Hier liegt ein Problem vor: Wenn Sie die Co-Funktion verwenden, besteht dieses Problem nicht, da Co nur it.next() in der Promise.then-Funktion ausführt. Das entspricht it.next () ist ein Kettenaufruf. Der Generator verwendet die Co-Funktion. Mit der Co-Funktion ist es nicht erforderlich, sie zu generieren und die nächste Methode auszuführen.
Das Prinzip von CO ist eigentlich einfach: Es wird rekursiv als nächstes ausgeführt, bis „Done“ wahr ist.
Wenn der von next zurückgegebene Wert ein Promise ist, führen Sie next in der Funktion then aus. Wenn es sich nicht um ein Promise handelt, führen Sie die nächste Funktion direkt aus.
Das Folgende ist eine vereinfachte handschriftliche Implementierung der Co-Funktionconst 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
})
Mit Generator ist es einfach, sich async/await vorzustellen, schließlich wird async/await durch Generator implementiert
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() } } }
因为request2耗时较短,会先返回,
也就是先执行it.next(2000),导致res1获得了request2的返回值
Weitere Informationen Programmierkenntnisse finden Sie unter: Programmiervideos! !
Das obige ist der detaillierte Inhalt vonWie geht JavaScript mit parallelen Anfragen um? Kurze Analyse von vier Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!