CODEWITHSUNDEEP
javascriptjqueryajaxasynchronoussynchronization
Matias Cicero
Matias Cicero

Reputation: 26321

Making multiple ajax requests synchronously

Let's suppose I have some function called makeRequest(), which makes an AJAX request to a server.

Now let's suppose I am given the amount of times this request should be made, but I can't do them asynchronously but synchronously instead.

For instance, I am given the number 5, and I shall call makeRequest(), when it's done, I shall call it again, and when it's done, I shall call it again... I should end up calling it 5 times.

I'm no expert at JavaScript but I found it easy to handle asynchronous calls by the use of callbacks.

So, my makeRequest() function takes a callback argument that is to be executed when the request has succeeded.

In my previous example, I had to make the request 5 times, so the behaviour should look like:

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

How can I design this to behave the same for any argument given to me, be it 6, 12 or even 1?

PS: I have tried many approaches, the most common involving creating while loops that wait until a flag is set by a finished request. All of these approaches makes the browser think the script crashed and prompt the user to stop the script.

Upvotes: 0

Views: 2124

Answers (3)

Sakthikanth
Sakthikanth

Reputation: 139

Here I have written multiple Ajax calls using promises. This function will run synchronously. You can get the current position of response which is executed from 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);

});

Upvotes: 0

Cerbrus
Cerbrus

Reputation: 72957

Simple, recursively call the ajax request, while keeping track of a count variable:

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

finalCallback is a optional callback (function) that will be executed when all the requests are completed.

Upvotes: 3

Naeem Shaikh
Naeem Shaikh

Reputation: 15725

You can do it this way,

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
    }

  });

}

Upvotes: 1

Related Questions