小编典典

异步的替代:错误的ajax

ajax

我遍历一个数组,每个数组都运行ajax请求。我需要按顺序执行请求,因此我可以接听最后一个请求并成功运行一个函数。

目前我正在运行(简体):

$.each(array, function(i, item){
    ajax_request(item.id, item.title, i);
})

function ajax_request(id, title, i){
    $.ajax({
        async: false,
        url: 'url here',
        success: function(){
            if(i == array.length-1){
                // run function here as its the last item in array
            }
        }
    })
}

但是,使用async:false会使应用程序无响应/变慢。但是,如果没有async:false,有时其中一个请求会挂起并在最后发送的ajax请求返回后实际上返回。

我如何不使用async:false来实现呢?


阅读 325

收藏
2020-07-26

共1个答案

小编典典

您可以使用本地函数来运行ajax调用,并且在每个后续的成功处理程序中,可以启动下一个ajax调用。

function runAllAjax(array) {
    // initialize index counter
    var i = 0;

    function next() {
        var id = array[i].id;
        var title = array[i].title;
        $.ajax({
            async: true,
            url: 'url here',
            success: function(){
                ++i;
                if(i >= array.length) {
                    // run function here as its the last item in array
                } else {
                    // do the next ajax call
                    next();
                }

            }
        });
    }
    // start the first one
    next();
}

在2016年使用使用promises的选项更新此答案。这是您依次运行请求的方式:

array.reduce(function(p, item) {
    return p.then(function() {
        // you can access item.id and item.title here
        return $.ajax({url: 'url here', ...}).then(function(result) {
           // process individual ajax result here
        });
    });
}, Promise.resolve()).then(function() {
    // all requests are done here
});

这是并行运行它们的方式,并返回所有结果:

var promises = [];
array.forEach(function(item) {
    // you can access item.id and item.title here
    promises.push($.ajax({url: 'url here', ...});
});
Promise.all(promises).then(function(results) {
    // all ajax calls done here, results is an array of responses
});
2020-07-26