Heim > Web-Frontend > js-Tutorial > Wie geht JavaScript mit parallelen Anfragen um? Kurze Analyse von vier Methoden

Wie geht JavaScript mit parallelen Anfragen um? Kurze Analyse von vier Methoden

青灯夜游
Freigeben: 2021-08-02 19:24:24
nach vorne
2528 Leute haben es durchsucht

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!

Wie geht JavaScript mit parallelen Anfragen um? Kurze Analyse von vier Methoden

Anforderungen

Zwei asynchrone Anfragen werden gleichzeitig gesendet und die Verarbeitung ist abgeschlossen, wenn beide Anfragen zurückkehren Methode 1

Verwenden Sie 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
})
Nach dem Login kopieren

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
  }
}
Nach dem Login kopieren

Methode 3

Generator, Ertrag

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();
Nach dem Login kopieren

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

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
})
Nach dem Login kopieren

Methode 4

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()
    }
  }
}
Nach dem Login kopieren
因为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!

Verwandte Etiketten:
Quelle:掘金--milugloomy
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage