ループ中でのAjaxの実行

Question

Ajaxでcgiを呼び出し、DBを検索して結果を返していました。

var request = $.ajax({type: 'GET',datatype:"text",
    data:{idnum:wkkey},
    url: "select.cgi",
    async: true 
})
request.done(function(reqdata) {
  /* Ajaxの結果処理　　　*/
}

これで動作していましたが
この処理をループして複数回実行する必要が生じました。
wkKeyArry に [111,222]と入っている状況で以下のように書き換えました。

for (cntID = 0;cntID < wkKeyArry.length;cntID++){
   wkkey = wkKeyArry[cntID]
   /* ここで上記の処理 */
	var request = $.ajax({type: 'GET',datatype:"text",
	    data:{idnum:wkkey},
	    url: "select.cgi",
	    async: true 
    })
}
request.done(function(reqdata) {
  /* Ajaxの結果処理　　　*/
}

しかし非同期処理では、ループの順番や結果が正しく処理されません。
async: falseと同期処理にしてしまうと、ブラウザから非推奨と
言われます。

この場合、ループの中でAjaxの通信を待たせることは不可能なのでしょうか。
別の処理を待たせるのであれば、success:に書く方法や$.whenを使う方法が
あるようですが、
同じ処理を繰り返したい場合は、どのように待たせればよいのでしょうか。

Ajaxで呼ばれる側に、ループの機能を持たせる方法も考えていますが、
呼び出し側にループを追加する方が修正量が少ないので、
できればjavascript側で対応したいと考えています。

補足します
Ajaxでの呼び出しは1つだけです。例として処理A,処理B,処理Cの順序を
制御するのであれば、ネット上で情報がありました。
同じ処理を繰り返す必要が生じました。
2回以上で想定できる回数は、現状は6回ですが、上限は規定できません。
一番簡単な方法は非同期を同期にするだけです。
ただこの方法をとるとブラウザに非推奨の警告メッセージが表示されるので
回避策をお聞きしました

Comments

[Lhankor_Mhy]

補足願います。
reqdata には何が入っている想定ですか？

[taro373]

reqdataにはAjaxでの結果が返ってきます
タブ区切りでデータを返しています

[Lhankor_Mhy]

お聞きしたかったのは、どのループでのAjaxでの結果なのか、ということです。
idnum=222の時、と理解してよろしいですか？　その場合、idnum=111の結果は捨てられますが、それでよろしいですか？

[taro373]

ご指摘ありがとうございます
そうなんです。dnum=111の結果は捨てられてしまい、困っていました。
wkKeyArry に[111,222]となっていたら、
111の結果と222の結果を順に受け取って、111の結果の下に222の結果を
結合した表にして出力用としています。

が、現状は222の結果しか受け取れていません

[Lhankor_Mhy]

なるほど。
では、yambejpさんのご回答の「A→B→Cと順番に処理」でよかったのですね。
ご解決されて何よりです。

Answer 1

やりたい処理によります

• A→B→Cと順番に処理したいならpromiseをネストしていきます
• A,B,Cを並行して動かして一番遅いのを待つならpromise.allで十分です
• たんにA,B,Cをバラバラに動かしてバラバラに処理するなら普通にfor文でまわすだけです

sample

• ajax.php

とりあえずsというパラメータでsleepする秒を渡してその値を表示するモノを用意

<?PHP
$sleep=filter_input(INPUT_GET,'s');
sleep($sleep);
print $sleep;
?>

※ajax.php?s=2とすると、2秒待って"2"と表示される

A→B→Cと順番に処理

2,3,1と渡すと、2秒後に"2"、その3秒後に"3"、その1秒後に"1"

$(function(){
  (async()=>{
    for(var i of [2,3,1]){
      await $.ajax({
      url:"ajax.php",
      data:{s:i},
      }).done(function(data){
        console.log(data);
      });
    }
  })();
});

A,B,Cを並行して動かして一番遅いのを待つ

2,3,1を渡すと、一番遅い3を待って2,3,1と表示される

$(function(){
  var d=[];
  $.each([2,3,1],function(x){
    d[x]=$.Deferred();
    $.ajax({
    url:"ajax.php",
    data:{s:$(this).get(0)},
    }).done(function(data){
      d[x].resolve(data);
    });
  });
  $.when.apply(null,d).done(function(r1,r2,r3){
    console.log([r1,r2,r3]);
  });
});

A,B,Cをバラバラに動かしてバラバラに処理するなら

2,3,1と渡すが、1,2,3と順次表示される

$(function(){
  $.each([2,3,1],function(){
    $.ajax({
    url:"ajax.php",
    data:{s:$(this).get(0)},
    }).done(function(data){
      console.log(data);
    });
  });
});

Comments

[taro373]

ありがとうございました。
やろうとしていたことは、
「A→B→Cと順番に処理」
の処理です。
この方法に変更します。
cgi側を変更することも考えましたが、かなりのレアケースに
修正量が多い方を修正するのは、と考えてお聞きしました。

ありがとうございました。

[taro373]

A→B→Cと順番に処理 の場合に
下から２行目にある
})();
の　() がわかりませんでした。
ベストアンサーを選んだ後なのですが、コメントいただけると幸いです

[yambejp]

これは無名関数をasync状態で実行してます

(async()=>{・・・})();
ということです
ちゃんと名前をつけて処理するとこう

const myFunc=async()=>{
for(var i of [2,3,1]){
await $.ajax({
url:"ajax.php",
data:{s:i},
}).done(function(data){
console.log(data);
});
}
}
$(function(){
myFunc();
});