什么'这是在失败时使用jQuery重试AJAX请求的最佳方式
What's the best way to retry an AJAX request on failure using jQuery?
伪代码：
$(document).ajaxError(function(e, xhr, options, error) {
xhr.retry()
})
更好的是某种指数后退
类似这样的东西：
$.ajax({
url : 'someurl',
type : 'POST',
data : ....,
tryCount : 0,
retryLimit : 3,
success : function(json) {
//do something
},
error : function(xhr, textStatus, errorThrown ) {
if (textStatus == 'timeout') {
this.tryCount++;
if (this.tryCount <= this.retryLimit) {
//try again
$.ajax(this);
return;
}
return;
}
if (xhr.status == 500) {
//handle error
} else {
//handle error
}
}
});
一种方法是使用包装器函数：
(function runAjax(retries, delay){
delay = delay || 1000;
$.ajax({
type : 'GET',
url : '',
dataType : 'json',
contentType : 'application/json'
})
.fail(function(){
console.log(retries); // prrint retry count
retries > 0 && setTimeout(function(){
runAjax(--retries);
},delay);
})
})(3, 100);
另一种方法是在$.ajax上使用retries属性
// define ajax settings
var ajaxSettings = {
type : 'GET',
url : '',
dataType : 'json',
contentType : 'application/json',
retries : 3 // <-----------------------
};
// run initial ajax
$.ajax(ajaxSettings).fail(onFail)
// on fail, retry by creating a new Ajax deferred
function onFail(){
if( ajaxSettings.retries-- > 0 )
setTimeout(function(){
$.ajax(ajaxSettings).fail(onFail);
}, 1000);
}
另一种方式（GIST）-覆盖原始$.ajax（更适合DRY）
// enhance the original "$.ajax" with a retry mechanism
$.ajax = (($oldAjax) => {
// on fail, retry by creating a new Ajax deferred
function check(a,b,c){
var shouldRetry = b != 'success' && b != 'parsererror';
if( shouldRetry && --this.retries > 0 )
setTimeout(() => { $.ajax(this) }, this.retryInterval || 100);
}
return settings => $oldAjax(settings).always(check)
})($.ajax);
// now we can use the "retries" property if we need to retry on fail
$.ajax({
type : 'GET',
url : 'http://www.whatever123.gov',
timeout : 2000,
retries : 3, // <-------- Optional
retryInterval : 2000 // <-------- Optional
})
// Problem: "fail" will only be called once, and not for each retry
.fail(()=>{
console.log('failed')
});
需要考虑的一点是确保$.ajax方法以前没有封装，以避免同一代码运行两次。
您可以将这些片段（按原样）复制粘贴到控制台以测试它们
我在下面的代码中取得了很多成功（例如：http://jsfiddle.net/uZSFK/)
$.ajaxSetup({
timeout: 3000,
retryAfter:7000
});
function func( param ){
$.ajax( 'http://www.example.com/' )
.success( function() {
console.log( 'Ajax request worked' );
})
.error(function() {
console.log( 'Ajax request failed...' );
setTimeout ( function(){ func( param ) }, $.ajaxSetup().retryAfter );
});
}
您的代码几乎已满：）
const counter = 0;
$(document).ajaxSuccess(function ( event, xhr, settings ) {
counter = 0;
}).ajaxError(function ( event, jqxhr, settings, thrownError ) {
if (counter === 0 /*any thing else you want to check ie && jqxhr.status === 401*/) {
++counter;
$.ajax(settings);
}
});
如果有人在ajax调用后调用.done()，这些答案都不起作用，因为您没有成功方法可以附加到未来的回调中。所以如果有人这样做：
$.ajax({...someoptions...}).done(mySuccessFunc);
则mySuccessFunc在重试时不会被调用。这是我的解决方案，它大量借鉴了@cjpak在这里的回答。在我的情况下，我想在AWS的API网关响应502错误时重试。
const RETRY_WAIT = [10 * 1000, 5 * 1000, 2 * 1000];
// This is what tells JQuery to retry $.ajax requests
// Ideas for this borrowed from https://stackoverflow.com/a/12446363/491553
$.ajaxPrefilter(function(opts, originalOpts, jqXHR) {
if(opts.retryCount === undefined) {
opts.retryCount = 3;
}
// Our own deferred object to handle done/fail callbacks
let dfd = $.Deferred();
// If the request works, return normally
jqXHR.done(dfd.resolve);
// If the request fails, retry a few times, yet still resolve
jqXHR.fail((xhr, textStatus, errorThrown) => {
console.log("Caught error: " + JSON.stringify(xhr) + ", textStatus: " + textStatus + ", errorThrown: " + errorThrown);
if (xhr && xhr.readyState === 0 && xhr.status === 0 && xhr.statusText === "error") {
// API Gateway gave up. Let's retry.
if (opts.retryCount-- > 0) {
let retryWait = RETRY_WAIT[opts.retryCount];
console.log("Retrying after waiting " + retryWait + " ms...");
setTimeout(() => {
// Retry with a copied originalOpts with retryCount.
let newOpts = $.extend({}, originalOpts, {
retryCount: opts.retryCount
});
$.ajax(newOpts).done(dfd.resolve);
}, retryWait);
} else {
alert("Cannot reach the server. Please check your internet connection and then try again.");
}
} else {
defaultFailFunction(xhr, textStatus, errorThrown); // or you could call dfd.reject if your users call $.ajax().fail()
}
});
// NOW override the jqXHR's promise functions with our deferred
return dfd.promise(jqXHR);
});
此代码段将后退并在2秒、5秒、10秒后重试，您可以通过修改retry_WAIT常量来编辑该代码段。
AWS支持建议我们添加重试，因为这种情况对我们来说只有一次。
这里有一个小插件：
https://github.com/execjosh/jquery-ajax-retry
自动递增超时将是一个很好的补充
要在全局范围内使用它，只需使用$.ajax签名创建您自己的函数，使用retry-api并用新函数替换所有的$.ajax调用。
此外，您还可以直接替换$.ajax，但如果不重试，就无法进行xhr调用。
以下是我异步加载库的方法：
var jqOnError = function(xhr, textStatus, errorThrown ) {
if (typeof this.tryCount !== "number") {
this.tryCount = 1;
}
if (textStatus === 'timeout') {
if (this.tryCount < 3) { /* hardcoded number */
this.tryCount++;
//try again
$.ajax(this);
return;
}
return;
}
if (xhr.status === 500) {
//handle error
} else {
//handle error
}
};
jQuery.loadScript = function (name, url, callback) {
if(jQuery[name]){
callback;
} else {
jQuery.ajax({
name: name,
url: url,
dataType: 'script',
success: callback,
async: true,
timeout: 5000, /* hardcoded number (5 sec) */
error : jqOnError
});
}
}
然后只需从应用程序中调用.load_script并嵌套成功回调：
$.loadScript('maps', '//maps.google.com/maps/api/js?v=3.23&libraries=geometry&libraries=places&language=&hl=®ion=', function(){
initialize_map();
loadListeners();
});
DemoUsers的答案不适用于Zepto，因为错误函数中的答案指向Window。（这种使用"this"的方式不够安全，因为你不知道他们是如何实现ajax的，或者根本不需要。）
对于Zepto，也许你可以试试下面的，到目前为止，它对我来说很好：
var AjaxRetry = function(retryLimit) {
this.retryLimit = typeof retryLimit === 'number' ? retryLimit : 0;
this.tryCount = 0;
this.params = null;
};
AjaxRetry.prototype.request = function(params, errorCallback) {
this.tryCount = 0;
var self = this;
params.error = function(xhr, textStatus, error) {
if (textStatus === 'timeout') {
self.tryCount ++;
if (self.tryCount <= self.retryLimit) {
$.ajax(self.params)
return;
}
}
errorCallback && errorCallback(xhr, textStatus, error);
};
this.params = params;
$.ajax(this.params);
};
//send an ajax request
new AjaxRetry(2).request(params, function(){});
使用构造函数来确保请求是可重入的！
我用@vsync 3rd代码解决了我的特定问题。
$.ajax = (($oldAjax) => {
var df = $.Deferred();
// on fail, retry by creating a new Ajax deferred
function check(self, status) {
console.log("check " + status + " => " + self.retries);
const shouldRetry = status != 'success' && status != 'parsererror';
if (shouldRetry && self.retries > 0) {
setTimeout(() => {
console.log("retry " + self.retries);
$.ajax(self);
}, self.retryInterval || 100);
}
}
function failed(jqXHR, status, e) {
if (this.retries - 1 <= 0) {
// 재시도 횟수가 끝나면, 오류 보내기
df.reject(KfError.convertKfError(jqXHR, this.url));
} else {
this.retries --;
check(this, 'retry', this.retries);
}
}
function done(res, textStatus, jqXHR) {
if (!res.success) { // 200 코드이지만, 응답에 실패라면 오류로 처리
if (this.retries - 1 <= 0) {
df.reject(KfError.createResponseError(res, this.url));
} else {
this.retries --;
check(this, 'retry', this.retries)
}
} else {
df.resolve(res, textStatus, jqXHR);
}
}
return function (settings) {
$oldAjax(settings)
.fail(failed)
.done(done);
return df;
};
})($.ajax);
function createRequest(url) {
return $.ajax({
type: 'GET',
url: url,
timeout: 2000,
retries: 3,
retryInterval: 1000
});
}
$(function () {
createRequest(Rest.correctUrl('/auth/refres'))
.then((res) => {
console.log('ok res');
})
.catch((e) => {
// Finally catch error after retrial.
console.log(e);
});
});
相关文章：
- JavaScript:在源404上重试
- 用分隔符分隔具有多个整数值的字符串的Javascript"重试错误的值
- Ajax在NodeJS中为一个耗时的请求请求多次重试
- 如何仅在RxJs中可观察到的源发出的特定错误上重试
- BreezeJS中央错误处理程序和自动重试
- 如何捕获请求中的错误，然后打开模态，然后在模态使用RxJS关闭时重试
- Angular2 http重试逻辑
- JS重试函数几次，看看它是否返回true
- Promise中的递归重试
- Bluebird Promise 重试 DocumentDB 请求
- 如果发生错误，如何重试 DriveApp.getFileById，直到成功
- Nodejs - 让客户端套接字在 5 秒超时后重试
- 重试时更改 ajax 数据
- RxJS 重试运算符与 ajax 调用
- 重置 jquery 对象
- JS/JQuery 重试 1 秒后 img 加载
- JavaScript重试承诺，直到解决
- 什么'这是在失败时使用jQuery重试AJAX请求的最佳方式
- jQuery ajax-只有在所有重试都失败时才触发失败回调函数
- 配置 jQuery 以在 ajax 调用失败时重试
