[jquery]並列処理の結果を順番通りに受け取る方法

通常jqueryを使用してAPIサーバに複数のリクエストを並列で処理させた場合、レスポンスが帰ってきた順番に次のsuccess処理が実行されてしまい、順番がランダムになってしまう。

とはいえ、並列ではなく番号順に処理させると処理速度が落ちてしまう。

$.ajaxの並列処理の結果を順番通りに受け取る方法は以下のように$.ajax自体を配列で格納して$.whenを使用して受け取ると順番通りに値が並ぶ

var productid = [1,2,3,4];
var jqXHRList = []; 
for (var i = 0; i < productid.length; i++) {
 jqXHRList.push($.ajax({
 // $.ajaxの戻り値を配列に格納
 url: 'api/hogehoge.php',
 data: {productid: productid[i]},
 dataType: 'json'
 })); 
}

$.when.apply($, jqXHRList).done(function () {
 var json = [];
 var statuses = [];
 var jqXHRResultList = [];
 for (var i = 0; i < arguments.length; i++) {
  var result = arguments[i];
  json.push(result[0]);
  statuses.push(result[1]);
  jqXHRResultList.push(result[3]);
  var dataStr = result.phrase;
  if(dataStr!= null){
   $(`#product${i}`).val( dataStr );
  }
 }
});

上記コードはproductid配列1,2,3,4をそれぞれforで回してAPIにproductidを変数としてPOSTし並列処理させている。さらにAPIのjson結果を1,2,3,4と順番通りに受け取って処理している。

$.whenで処理する時、argumentsという変数に結果が格納されている。APIから受け取った結果はargumentsのそれぞれ[0]に格納されているのでjsonという配列に格納し直している