jQuery ajax - すべての再試行が失敗した場合にのみコールバック関数が失敗する

Question

私が知っているように、jQueryでajaxを使用しています。$.ajaxは約束を返しますajaxPromise。私の要件は：すべてのAJAX呼び出しの再試行が失敗した場合にのみ、ajaxPromiseが失敗をキャッチします（私はajax約束コールバック関数内でエラーを処理したい）。

私は、次のコードを試みた：私が欲しいもの

function ajax(data) { 
    return $.ajax({ 
    url: "...", 
    data: data, 
    triedCount: 0, 
    retryLimit: 3, 
    error: function(xhr, textStatus, errorThrown) { 
     console.log("error: " + this.triedCount); 
     this.triedCount++; 
     if (this.triedCount < this.retryLimit) { 
     $.ajax(this); 
     } 
    } 
    }); 
} 

var ajaxPromise = ajax({"id": "123"}); 
ajaxPromise.fail(function(xhr) { 
    console.log("All retries failed..."); 
    // all retries failed, handle error 
}); 

出力は次のとおりです。

error: 0 
error: 1 
error: 2 
All retries failed... 

実際に出力されているものの：failコールバックが直後にトリガーされるように

error: 0 
All retries failed... 
error: 1 
error: 2 

が見えます最初の呼び出しは失敗しますが、私はfailコールバックが必要ですすべての再試行が失敗した後にトリガされます。

すべての再試行が失敗した場合にのみ、ajaxPromise.failコールバックをトリガーする方法はありますか？または、これを行うための他のオプションがありますか？

Answer 1

function ajax(data) { 
    return $.ajax({ 
    url: "...", 
    data: data, 
    triedCount: 0, 
    retryLimit: 3, 
    error: function(xhr, textStatus, errorThrown) { 
     console.log("error: " + this.triedCount); 
     this.triedCount++; 
     if (this.triedCount < this.retryLimit) { 
     console.log(this); 
     $.ajax(this); 
     } 
    } 
    }); 
} 

ここでコードにエラーが発生した場合は、ajax関数を呼び出します。これは、以前のajax呼び出しが完了しなかったことを意味するものではありません。最初のajax呼び出しが完了し、戻り値を送信します（失敗）。あなたの

ajaxPromise.fail(function(xhr) { 
console.log("All retries failed..."); 
    // all retries failed, handle error 
}); 

が実行され、「すべての再試行に失敗しました」というメッセージがコンソールに記録されます。 達成したいことを達成したい場合は、前の結果を傍受し、それが返されないようにする必要があります。代わりに、3回の試行が完了したことを確認してから値を返します。しかし、私はそれを行う方法がわかりません。

編集：長い研究の後、私はそれができないことがわかった。あなたはそのようなことをしようとしないでください。ちょうど冗談です！このコードをチェックし、私はこれが正確に何をしたいです信じる：

// Code goes here 
 

 
function ajax(data) { 
 
    var dfd = $.Deferred(); 
 
    $.ajax({ 
 
    url: "...", 
 
    data: data, 
 
    triedCount: 0, 
 
    retryLimit: 3, 
 
    success: function(){ 
 
     dfd.resolve("success"); 
 
    }, 
 
    error: function(xhr, textStatus, errorThrown) { 
 
     console.log("error: " + this.triedCount); 
 
     this.triedCount++; 
 
     if (this.triedCount < this.retryLimit) { 
 
     $.ajax(this); 
 
     } 
 
     else{ 
 
     dfd.reject(xhr); 
 
     } 
 
    } 
 
    }); 
 
    return dfd.promise(); 
 
} 
 
var ajaxPromise = ajax({"id": "123"}); 
 
ajaxPromise.fail(function(xhr) { 
 
    console.log("All retries failed..."); 
 
    // all retries failed, handle error 
 
    console.log(xhr.responseText); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

EDIT：エラーが失敗したAJAX呼び出しからスローは、ajaxPromiseコールバックのxhrパラメータで利用できるようになります。

Answer 2

$.Deferred(),.rejectWith()を使用できます。 beforeStartが$.Deferred()、ajaxOptionsがパラメータとして渡された再帰関数を呼び出します。 this.triedCountがthis.retryLimit以上である場合、戻り値は、ajaxPromise

function ajax(data) { 
 
    var ajaxOptions = { 
 
    url: "...", 
 
    data: data, 
 
    triedCount: 0, 
 
    retryLimit: 3 
 
    }; 
 
    return new $.Deferred(function(dfd) { 
 
    function request(opts) { 
 
     $.ajax(opts) 
 
     .fail(function(xhr, textStatus, errorThrown) { 
 
      console.log("error: " + this.triedCount); 
 
      this.triedCount++; 
 
      if (this.triedCount < this.retryLimit) { 
 
      return request(this) 
 
      } else { 
 
      dfd.rejectWith(this, [xhr]) 
 
      } 
 
     }) 
 
    } 
 
    request(ajaxOptions) 
 
    }) 
 
} 
 

 
var ajaxPromise = ajax({ 
 
    "id": "123" 
 
}); 
 
ajaxPromise.fail(function(xhr) { 
 
    console.log("All retries failed...", xhr); 
 
    // all retries failed, handle error 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>