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

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

青灯夜游
青灯夜游nach vorne
2021-07-27 10:53:222497Durchsuche

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

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, 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();

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

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()
    }
  }
}
因为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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:掘金--milugloomy. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen