同步发出多个 ajax 请求

Question

假设我有一些名为 makeRequest() 的函数，它向服务器发出 AJAX 请求。

现在假设我知道应该发出此请求的次数，但我不能异步执行，而是同步执行。

比如给我5号，我叫makeRequest()，打完再打，打完再打……我应该最后调用它 5 次。

我不是 JavaScript 方面的专家，但我发现使用回调处理异步调用很容易。

因此，我的 makeRequest() 函数接受一个 callback 参数，该参数将在请求成功时执行。

在我之前的示例中，我不得不发出 5 次请求，因此行为应该如下所示：

makeRequest(function () {
     makeRequest(function () {
        makeRequest(function () {
           makeRequest(function () {
              makeRequest(function () {
              });
           });
        });
     });
});

我如何设计它以对给我的任何参数表现相同，无论是 6、12 还是 1？

PS: 我尝试了很多方法，最常见的涉及创建 while 循环，等待完成的请求设置标志。所有这些方法都会让浏览器认为脚本崩溃并提示用户停止脚本。

Answer 1

简单，递归调用 ajax 请求，同时跟踪计数变量：

function makeRequest(count, finalCallback){
    someAjaxCall(data, function(){
        if(count > 1){
            makeRequest(count - 1, finalCallback);
        } else {
            finalCallback && finalCallback();
        }
    });
}

finalCallback 是一个可选的回调（函数），将在所有请求完成时执行。

Answer 2

你可以这样做，

var i = 5;  // number of calls to you function calling ajax
recurs(i);  // call it initially

function recurs(count) {


  makeRequest(function() {
    count--;  // decrement count
    if (count > 1) {
      recurs(count)  // call function agian
    }

  });

}

Answer 3

这里我使用 promises 编写了多个 Ajax 调用。此函数将运行同步。您可以获得从 Ajax.

执行的响应的当前位置

var ajaxs = {
    i : 0,
    callback : null,
    param : null,
    exec_fun : function (i) {
        let data_send = this.param[i];
        let url = this.url;
        this.promise = new Promise(function (res,rej) {
              $.ajax({
                        url: url,
                        method: 'POST',
                        data: data_send,
                        dataType: 'json',
                        success: function(resvalidate){
                            res(resvalidate);
                        }
                });

        });
        this.promise.then(function (resvalidate) {
            let resp = resvalidate,
                param = ajaxs.param,
                pos = ajaxs.i,
                callback_fun = ajaxs.callback_fun;
            callback_fun(resp,ajaxs.i);
            ajaxs.i++;
            if( ajaxs.param[ajaxs.i] != undefined){
                ajaxs.exec_fun(ajaxs.i);
            }
        });


    },
    each : function (url,data,inc_callback) {
        this.callback_fun = inc_callback;
        this.param = data;
        this.url = url;

        this.exec_fun(ajaxs.i);


    }
};


let url = "http://localhost/dev/test_ajax.php";
let data_param = [{data : 3},{data : 1},{data : 2}];

ajaxs.each(url,data_param, function (resp,i) {
    console.log(resp,i);

});

同步发出多个 ajax 请求

Making multiple ajax requests synchronously

javascript

ajax

jquery

synchronization

asynchronous