web-dev-qa-db-ja.com

複数のAxiosリクエストを同時に投稿する方法は？

この時点で、Axios POST呼び出しの長いリストが行われているWebページがあります。今、要求は並列に送信されているようです（JavaScriptは結果が出る前に次の要求を送信し続けます受け取った）。

ただし、結果は同時にではなく、1つずつ返されるようです。 1つのPOST PHPスクリプトへの呼び出しには4秒かかり、10回の呼び出しが必要です。現在、呼び出しごとに4秒かかります。合計40秒です。両方の解決策を見つけて、すべての結果を約40秒ではなく、ほぼ同じ時間（約4秒）で受信したいと考えています。

これで、ワーカーについてのNodeJSでのスレッド、マルチスレッドについて読みました。私はJavaScript自体がシングルスレッドのみであることを読んだので、それ自体ではこれを許可しないかもしれません。

しかし、私はここからどこへ行くべきかわかりません。私が持っているのはいくつかのアイデアです。私が正しい方向に進んでいるかどうかはわかりません。私が進んでいる場合、NodeJSでワーカーを使用してコードに適用する方法がわかりません。どちらの道を行けばいいですか？どんなガイダンスも大歓迎です！

以下は、小さなコード例です。

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

このようにしてみてください

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

ループ内で使用したい場合は、以下のように@deelinkのわずかに変更されたバージョンを使用できます。

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

これは奇妙であり、起こるべきではありません。 Javascriptエンジンはシングルスレッドですが、Web API（AJAXリクエストを行うときに内部的に使用される）はそうではありません。したがって、リクエストはほぼ同時に行われる必要があり、応答時間はサーバーの処理時間とネットワークの遅延。

Webブラウザーにはサーバーあたりの接続数に制限があります（chrome https://bugs.chromium.org/p/chromium/issues/detail?id=12066 ）これはいくつかのシリアライゼーションを説明しますが、これはそうではありません。

リクエストには4秒かかりますlongので、サーバーに問題があると思います。一度に1つの接続しか処理できない場合があります。あなたはそれを制御していますか？

0
xabitrigo

Axios.allでこれを試してください。

  • Promise.all（）メソッドを使用すると、反復可能オブジェクトとして渡されたすべてのPromiseが満たされたときに満たされる単一のPromiseが返されます 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);
})

参照リンク

ここでaxiosの完全な例を検索

0
Pallav Chanana