Comment JavaScript gère-t-il les requêtes parallèles ? Brève analyse de quatre méthodes

Cet article vous permettra de savoir comment JavaScript gère les requêtes parallèles ? En présentant les quatre façons dont JS gère les requêtes parallèles, j'espère que cela sera utile à tout le monde !

Exigences

Deux requêtes asynchrones sont envoyées en même temps et le traitement est effectué lorsque les deux requêtes reviennent

Mise en œuvre

La méthode ici ne fournit que des idées et ne gère la requête qu'avec succès

Méthode 1

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

Méthode 2

Personnalisez le statut, jugez le statut de retour dans le rappel et attendez que les deux demandes aient des valeurs de retour avant de traiter

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

Méthode 3

générateur, rendement

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

Il y a un problème ici, 因为request2耗时较短，会先返回，也就是先执行it.next(2000)，导致res1获得了request2的返回值Si vous utilisez la fonction co, ce problème n'existera pas, car co ne l'exécute que it.next() dans la fonction promise.then, ce qui équivaut à it.next () est un appel en chaîne

le générateur utilise la fonction 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
})

Avec la fonction co, il n'est pas nécessaire de la générer et d'exécuter la méthode suivante ; Le principe de co est en fait simple, c'est-à-dire exécuter récursivement next jusqu'à ce que done soit vrai ; Si la valeur renvoyée par next est une promesse, exécutez next dans la fonction then. Si ce n'est pas une promesse, exécutez directement la fonction suivante. Ce qui suit est une implémentation manuscrite simplifiée de la fonction 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()
    }
  }
}

Méthode 4

Avec le générateur, il est facile de penser à async/await Après tout, async/await est implémenté par générateur

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

Pour en savoir plus. connaissances liées à la programmation, veuillez visiter : Vidéos de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!