jQuery ajax - 僅在所有重試失敗時觸發失敗回調函數

Question

我使用jQuery與jQuery，因爲我們知道$.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... 

雖然實際輸出爲：

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

貌似fail回調後立即觸發第一次通話失敗，而我想要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>

編輯：錯誤拋出從失敗的Ajax調用將在ajaxPromise回調xhr參數可用。

Answer 2

您可以使用$.Deferred(),.rejectWith();以$.Deferred()的beforeStart與ajaxOptions作爲參數傳遞調用遞歸函數;如果this.triedCount不低於this.retryLimit少，回報拒絕延期的對象與this設置爲當前AJAX選項，xhr作爲參數傳遞給.fail()鏈接到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>