私のreactアプリケーションには、グリッドがあります。ユーザーは一度に多数のグリッド行を選択し、ボタンをクリックして、選択したグリッド行に対して一括アクションを実行できます。
サーバー側では、バルクアクションをクリックするだけで、選択した行ごとに実行するスクリプトがあります（質問を簡単にするために、以下の例では、選択した行ごとに「jsonplaceholder.typicode.com」を呼び出しています）。ボタン。一括アクションボタンをクリックすると、アクションクリエーターでselectedRowsが取得されます。ここで、selectedRowsを繰り返し処理し、選択された各行に対してajax呼び出しを行います。
selectedRowsには1000を超えるアイテムが含まれている可能性があり、forEachループを使用してajax呼び出しを繰り返し行うと、各リクエストが解決される前にブラウザページが最終的に応答を停止する可能性があります。したがって、以下のソリューションを使用して、5つのバッチでリクエストを送信し、それらの5つが解決されるまで待ちます。
// Action creator, selectedRows is an array.
function onGridRowsSelection(selectedRows) {
makeBatchCalls(selectedRows,5)
}
async function makeBatchCalls(selectedRows, length) {
let test = arrayIds.reduce((rows, key, index) => (index % length == 0
? rows.push([key])
: rows[rows.length-1].push(key)) && rows, []);
let Batchresults = []; //convert them to two dimensionl arrays of given length [[1,2,3,4,5], [6,7,8,9,10]]
for (calls of test) {
Batchresults.push(await Promise.all(calls.map((call)=>{
fetch(`https://jsonplaceholder.typicode.com/posts/${call}`)
})
));
}
return Promise.all(Batchresults); //wait for all batch calls to finish
}
上記の解決策は正常に機能しますが、1つの問題があります。
どうすればこれを制限できますか？
ここで言及されている問題のフォローアップの質問は、Reactで尋ねられます-複雑なアプリケーションで副作用なしに非同期呼び出しをスマートに制御する
この質問はJavaScript、Reactのフォローアップ質問です-複数の同時ajax呼び出しを送信します
asyncモジュールは、この機能を持っていますasync.queue。まず、タスク関数を定義します。次に、それにタスクを与えます-あなたの場合、行の配列とそれが実行したいアクション。タスクが実行されるか、進行中のタスクがすでにある場合はキューに追加されます。タスクが完了すると、次のタスクがキューから取得されます。
さらに良いことに、1つの行に対してのみタスク関数を定義し、キューの同時実行性を5に設定できます。ユーザーがボタンをクリックすると、選択された行ごとに1つずつ、多数のタスクがキューに追加されます。5つのタスクがすぐに実行を開始し、残りはキューに入れられます。これはおそらくあなたがやろうとしていることよりも優れています。なぜなら、この方法でユーザーは2つのタスクを開始し、すぐに別の3つのタスクを開始でき、それらはすべて並行して実行されるからです。
次のコードを試してください。
const async = require('async'); // or whatever mechanism you're using for module management.
const queue = async.queue((row, callback) => {
fetch(`https://jsonplaceholder.typicode.com/posts/${call}`)
.then(callback, callback);
}, 5);
function onGridRowsSelection(selectedRows) {
for (let call of selectedRows) {
queue.push(call);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加