JQuery で複数の ajax の終了を待ってから処理がしたい

JQuery で複数の ajax（非同期リクエスト）がすべて終了するのを待ってから何かしたいときのメモです。

やり方としては、処理を待ちたい ajaxオブジェクトを配列に格納しておいてから、when で処理します。

ソースは以下の感じで。

let ajaxList = []; // ajaxオブジェクトを格納するための配列 // ajax リクエスト１ let ajaxObj = $.ajax({ type: "post", // method = "POST" url: "http://example.com/hoge/", // POST送信先のURL data: DATA, // 送信データ contentType: 'text/plain', // リクエストの Content-Type dataType: "text", // レスポンスをtextとしてパースする success: function (data, textStatus, xhr) { // リクエストが成功時の処理 }, error: function (xhr, textStatus, errorThrown) { // リクエストが失敗時の処理 } }); ajaxList.push(ajaxObj); // ajax リクエスト２ ajaxObj = $.ajax({ type: "post", // method = "POST" url: "http://example.com/fuga/", // POST送信先のURL data: DATA, // 送信データ contentType: 'text/plain', // リクエストの Content-Type dataType: "json", // レスポンスをJSONとしてパースする success: function (data, textStatus, xhr) { // リクエストが成功時の処理 }, error: function (xhr, textStatus, errorThrown) { // リクエストが失敗時の処理 } }); ajaxList.push(ajaxObj); // すべての ajax の終了を待ってから実行される処理 $.when.apply($, ajaxList).done(function(){ // リクエストのすべての結果が成功だった場合の処理 }).fail(function(){ // リクエストのいずれかの結果が失敗だった場合の処理 }); // ここに書いた処理は ajax の終了を待たずに実行される

これでＯＫ！

【関連エントリー】

• JQuery の when の fail は待ってくれない

Comments

[スポンサーリンク]

11行目、27行目の処理と37行目の処理はどちらが先に実行されますか？

[夢界]

コメントありがとございます。

11行目、27行目の処理については、どちらが先に実行されるかは分かりません。
そこを制御しようとすると、$.ajax を入れ子にするしか無い認識です。

37行目の処理については、11行目、27行目の処理が両方終了してから実行されます。

お役に立ては幸いです。