JSFiddle - React, Tailwind, and code Playground
HTML
<input id="status" type="text" value="400">
<button id="start">Start</button>
<pre><code id="output"></code></pre>
JavaScript
var output = $("#output");
var status = $("#status");
var startBtn = $("#start");
startBtn.click(function(){
// Clear the output
output.html("");
// Define your Ajax settings
var url = "https://httpbin.org/";
status.val() == 200 ? url += "get" : url += "status/" + status.val();
var settings = {
url: url,
contentType: "application/json; charset=UTF-8",
}
// Make the request and retry up to 3 times,
// waiting 500 milliseconds between tries
var promise = new AjaxRetry(settings, 3, 1000)
.done(function(data){
writeJson(data, "success");
}).fail(function(error) {
writeJson(error, "error");
});
});
// Constructor for our retry-able ajax calls
function AjaxRetry(settings, maxTries, interval) {
var self = this;
this.settings = settings;
this.maxTries = typeof maxTries === "number" ? maxTries : 0;
this.completedTries = 0;
this.interval = typeof interval === "number" ? interval : 0;
return tryAjax().promise();
function tryAjax(deferred) {
console.log("Trying ajax #" + (self.completedTries + 1));
var d = deferred || $.Deferred();
$.ajax(self.settings)
.done(function(data) {
self.completedTries++;
d.resolve(data);
self.done = true;
})
.fail(function(error) {
self.completedTries++;
if (self.completedTries < self.maxTries) {
console.log("Waiting " + interval + "ms before retrying...");
setTimeout(function(){
tryAjax(d);
}, self.interval);
} else {
d.reject(error);
}
});
return d;
}
}
// Utility method for displaying the result
function writeJson(data, state) {
var result = JSON.stringify(data, null, 2);
output.html(state + "<hr>" + result);
}