Maison > Article > interface Web > 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 !
Deux requêtes asynchrones sont envoyées en même temps et le traitement est effectué lorsque les deux requêtes reviennent
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!