我有一个问题,当提交表单时,所有活跃的ajax请求失败,并触发错误事件。
如何在jQuery中停止所有活动ajax请求而不触发错误事件?
我有一个问题,当提交表单时,所有活跃的ajax请求失败,并触发错误事件。
如何在jQuery中停止所有活动ajax请求而不触发错误事件?
当前回答
我扩展了mkmurray和SpYk3HH回答上面的xhrPool。abortAll可以中止所有给定url的挂起请求:
$.xhrPool = [];
$.xhrPool.abortAll = function(url) {
$(this).each(function(i, jqXHR) { // cycle through list of recorded connection
console.log('xhrPool.abortAll ' + jqXHR.requestURL);
if (!url || url === jqXHR.requestURL) {
jqXHR.abort(); // aborts connection
$.xhrPool.splice(i, 1); // removes from list by index
}
});
};
$.ajaxSetup({
beforeSend: function(jqXHR) {
$.xhrPool.push(jqXHR); // add connection to list
},
complete: function(jqXHR) {
var i = $.xhrPool.indexOf(jqXHR); // get index for current connection completed
if (i > -1) $.xhrPool.splice(i, 1); // removes from list by index
}
});
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
console.log('ajaxPrefilter ' + options.url);
jqXHR.requestURL = options.url;
});
除了abortAll现在可以选择接受url作为参数并只取消对该url的挂起调用之外,其他用法是相同的
其他回答
var Request = {
List: [],
AbortAll: function () {
var _self = this;
$.each(_self.List, (i, v) => {
v.abort();
});
}
}
var settings = {
"url": "http://localhost",
success: function (resp) {
console.log(resp)
}
}
Request.List.push($.ajax(settings));
每当您想要中止所有ajax请求时,只需调用这一行
Request.AbortAll()
这里是一个复制过去的函数,刷新所有的ajax调用。 fillCompteList()和fetchAll()必须返回ajax对象:
function fillCompteList() {
return $.ajax({
url: 'www.somewhere.com' ,
method: 'GET',
success: function(res){
...
});
然后用这个
var xhrPool = [fillCompteList(inisial), fetchAll(params)] ;//old
function refrechAllUsing(SOME , params){
xhrPool.forEach(function(request){
request.abort();
});
xhrPool = [fillCompteList(SOME), fetchAll(params)]//new with other parameters
Promise.all(xhrPool).then(() => {
$('#loadding').undisplay();//remove the loadding screen
}).catch(() => {
warning("Some problem happened");
$('#loadding').undisplay();//remove the loadding screen
});
}
安迪的代码有一些问题,但它给了我一些很好的想法。第一个问题是,我们应该弹出任何成功完成的jqXHR对象。我还必须修改abortAll函数。下面是我最终的工作代码:
$.xhrPool = [];
$.xhrPool.abortAll = function() {
$(this).each(function(idx, jqXHR) {
jqXHR.abort();
});
};
$.ajaxSetup({
beforeSend: function(jqXHR) {
$.xhrPool.push(jqXHR);
}
});
$(document).ajaxComplete(function() {
$.xhrPool.pop();
});
我不喜欢ajaxComplete()做事情的方式。无论我如何尝试配置. ajaxsetup,它都不工作。
以下是我目前正在使用的方法。
$.xhrPool = [];
$.xhrPool.abortAll = function() {
_.each(this, function(jqXHR) {
jqXHR.abort();
});
};
$.ajaxSetup({
beforeSend: function(jqXHR) {
$.xhrPool.push(jqXHR);
}
});
注意:_。js中的每一个都存在,但显然不是必需的。我只是懒惰,我不想把它改为$.each()。8页
下面的代码片段允许您维护一个请求列表(池),并在需要时中止它们。最好放在html的<HEAD>中,在任何其他AJAX调用之前。
<script type="text/javascript">
$(function() {
$.xhrPool = [];
$.xhrPool.abortAll = function() {
$(this).each(function(i, jqXHR) { // cycle through list of recorded connection
jqXHR.abort(); // aborts connection
$.xhrPool.splice(i, 1); // removes from list by index
});
}
$.ajaxSetup({
beforeSend: function(jqXHR) { $.xhrPool.push(jqXHR); }, // annd connection to list
complete: function(jqXHR) {
var i = $.xhrPool.indexOf(jqXHR); // get index for current connection completed
if (i > -1) $.xhrPool.splice(i, 1); // removes from list by index
}
});
})
</script>