私のReactアプリケーションには、ajax呼び出しキューのパラメーターとして使用する必要があるパラメーターの配列(たとえば、いくつかのID)があります。問題は、配列に1000を超えるアイテムが含まれている可能性があり、forEachループを使用してajax呼び出しを再帰的に行うと、各リクエストが解決される前にブラウザページが最終的に応答を停止することです。
たとえば、一度に5つのリクエストで非同期にajaxリクエストを送信し、それらが終了した場合にのみ次の5つに進むことができるテクニック/ライブラリはありますか?
フォローアップの質問:
esバージョンに制約されず、es6を使用できる場合は、asyncawaitを調べる必要があります。
async function makeBatchCalls(arrayIds, 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
}
makeBatchCalls([1,2,3,4,5,6,7,8,9,10,12,12,13,14,15,16,17,18,19,20],3)
async / awaitは、非同期呼び出しを待機する正確なシナリオを対象としています。基本的に、awaitが解決されるまで、非同期関数内で実行が中断されます。使用を開始する前に、Promiseとジェネレーターを理解する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加