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

JQuery を使ってて、複数の非同期通信（ $.ajax() ）が全て終わってから処理をしたい場合がありまして、$.ajax() の戻り値を配列に突っ込んで、$.when で処理しようとしたのですが・・・。

全て成功の場合はそれで良かったのですが、どれか一つでも非同期通信が失敗すると、そこで when の fail が走っちゃうみたいなんですよね。

今回は成功でも失敗でも、とにかく全ての処理の終了を待ちたかったので、これではちょっと困ります。

というわけで調べてみたら、$.Deferred() を使うとできそうなのでやってみました

ソースコードは以下のような感じになります。

let asyncs = []; // 非同期通信終了判定用 // ajax リクエスト for(let i=0; i<3; i++){ let dfr = new $.Deferred(); $.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) { // リクエストが失敗時の処理 }, complete: function(xhr, textStatus){ // リクエストが成功しても失敗しても行う処理 dfr.resolve(); // dfr に成功をセット } }); asyncs.push(dfr.promise()); } // すべての ajax の終了を待ってから実行される処理 $.when.apply($, asyncs).done(function(){ // リクエストのすべての処理が終了してから実行する処理 }); // ここに書いた処理は ajax の終了を待たずに実行される

$.Deferred() とはなんぞや？ というところに関しては、理解が及んでいないのでパスさせていただくとして、とりあえず resolve() をセットすれば結果が成功に倒れます。

ちなみに失敗をセットする時は reject() を使います。

あとキモになるのは、判定用の配列に詰め込むのが Deferred オブジェクトの promise() メソッドの戻り値というところでしょうか。

これでＯＫ！