web-dev-qa-db-fra.com

Comment publier plusieurs requêtes Axios en même temps?

En ce moment, j'ai une page Web dans laquelle une longue liste d'appels Axios POST appels sont en cours. Maintenant, les requêtes semblent être envoyées en parallèle (JavaScript continue d'envoyer la requête suivante avant que le résultat ne soit reçu).

Cependant, les résultats semblent être retournés un par un, pas simultanément. Disons qu'un POST appel au script PHP prend 4 secondes et j'ai besoin de faire 10 appels. Cela prendrait actuellement 4 secondes par appel, ce qui serait 40 secondes au total. J'espère trouver une solution aux deux et recevoir tous les résultats à peu près au même moment (~ 4 secondes) au lieu de ~ 40 secondes.

Maintenant, j'ai lu sur les threads, le multithreading dans NodeJS à l'aide de Workers. J'ai lu que JavaScript lui-même n'est qu'un thread unique, il peut donc ne pas le permettre par lui-même.

Mais je ne sais pas trop où aller à partir d'ici. Tout ce que j'ai, ce sont quelques idées. Je ne sais pas si je vais ou non dans la bonne direction et si je le suis, je ne sais pas comment utiliser Workers dans NodeJS et l'appliquer dans mon code. Quelle route dois-je emprunter? Toute orientation serait très appréciée!

Voici un petit exemple de code:

for( var i = 0;  i < 10;  i++ )
{
    window.axios.post(`/my-url`, {
        myVar: 'myValue'
    })
    .then((response) => {
        // Takes 4 seconds, 4 more seconds, 4 more seconds, etc
        // Ideally: Takes 4 seconds, returns in the same ~4 seconds, returns in the same ~4 seconds, etc
        console.log( 'Succeeded!' );
    })
    .catch((error) => {
        console.log( 'Error' );
    });

    // Takes < 1 second, < 1 more second, < 1 more second, etc
    console.log( 'Request sent!' );
}
javascriptnode.jsmultithreadingaxios
5
Z0q

Essayez de cette façon

window.axios.all([requestOne, requestTwo, requestThree])
  .then(axios.spread((...responses) => {
    const responseOne = responses[0]
    const responseTwo = responses[1]
    const responesThree = responses[2]
    // use/access the results 
  })).catch(errors => {
    // react on errors.
  })
1
dellink

Si vous voulez l'avoir dans une boucle, vous pouvez avoir une version légèrement modifiée de @deelink comme ci-dessous

let promises = [];
for (i = 0; i < 10; i++) {
  promises.Push(
    window.axios.post(`/my-url`, {
    myVar: 'myValue'})
   .then(response => {
      // do something with response
    })
  )
}

Promise.all(promises).then(() => console.log('all done'));
0
Rajesh

C'est bizarre et ça ne devrait pas arriver. Les moteurs Javascript sont à thread unique, mais les API Web (qui sont utilisées en interne lors de la création de requêtes AJAX)) ne le sont pas. Les requêtes doivent donc être effectuées approximativement au même moment et les temps de réponse doivent dépendre de temps de traitement du serveur et retards du réseau.

Les navigateurs Web ont une limite sur le nombre de connexions par serveur (6 dans chrome https://bugs.chromium.org/p/chromium/issues/detail?id=12066 ) ce qui expliquerait une certaine sérialisation, mais pas cela.

Puisque les demandes prennent 4 secondes, ce qui est long, je suppose que le serveur est le problème. Il ne peut gérer qu'une seule connexion à la fois. En avez-vous le contrôle?

0
xabitrigo

Essayez ceci avec Axios.all et

  • Utiliser la méthode Promise.all () retourne une seule Promise qui se réalise lorsque toutes les promesses passées comme itérables ont été remplies Promise MDN ref Link

    import axios from 'axios';
let one = "https://api1"
let two = "https://api2"
let three = "https://api3"

const requestOne = axios.get(one);
const requestTwo = axios.get(two);
const requestThree = axios.get(three);

axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => {
  const responseOne = responses[0]
  const responseTwo = responses[1]
  const responesThree = responses[2]
  // use/access the results 
console.log("responseOne",responseOne);
console.log("responseTwo",responseTwo);
console.log("responesThree",responesThree);
})).catch(errors => {
  console.log(errors);
})

Lien de référence

Trouvez l'exemple complet ici pour axios

0
Pallav Chanana