How to two async calls Synchronously in javascript?

Question

I have a common generic function which will make use for ajax calls. While triggering the first time I will get the whole data from the server and I will maintain local scope. So In in the second time, it won't the server for the data. In my case the problem is the first request is async request while processing the first request second request is coming and again it is hitting the server. Now, how I can put the second request in waiting for state until the first request was finished?

a.js will call the call.js which has the ajax call: get();

b.js also will call the same function. In the second the data was available in global variable so that it won't make any ajax call: get();

call.js:

var get = function() {
  var global = [];
    if (Object.keys(global).length)
      retrun global;
    ajaxcall({
      // ...
    }).done(function(data) {
      global = data;
    }).fail(function(err) {
    });
  }

In this case while processing the first request second request is coming. So it is making another call.

Are they 2 calls to the same service? IE: calling the same end point but just being triggered from different points/times in the client? — Igor, Sep 21 '17 at 19:17
If there's already data, then it returns the data. If there isn't, it makes the ajax call and then returns nothing. Is this intended behavior? — RedDwarfian, Sep 21 '17 at 19:34

Alex AIT · Accepted Answer · 2017-09-22T05:37:32.807

To have just one request running to the server, and the next request has to wait until the first one is done

The question needs a couple more lines of code and has been answered before, so I will just link to a couple of examples. What you should be looking for are the keywords "ajax queue".

Queue AJAX calls

Sequencing ajax requests

I would recommend using one of the available libraries for this case, but the first answer also gives an example of some library-free code.

To have just one request and cache the result

Usually the first thing to do would be to just keep track of your existing call.

var isCallInProgress = false;
var global = [];
var get = function() {
if (Object.keys(global).length)
  return global;

if (isCallInProgress)
  return;        

isCallInProgress = true;
ajaxcall({
  // ...
}).done(function(data) {
  global = data;
  isCallInProgress = false;
}).fail(function(err) {
});
}

Depending on your usecase, you may need to do some further work here. Returning the data immediately if its already loaded and returning nothing if its not is not really ideal. Something like this would be more along the usual expected API design:

var isCallInProgress = false;
var global = [];
var get = function(returnCallback) {
 if (Object.keys(global).length){
   // callback immediately
   // you might also want to wrap this in a promise or setTimeout, depending on your expected behavior
   returnCallback(global);
 } 

 if (isCallInProgress)
   return;         

 isCallInProgress = true;
 ajaxcall({
   // ...
 }).done(function(data) {
   global = data;
   isCallInProgress = false;

   // async callback
   returnCallback(global);

 }).fail(function(err) {
     // error callback would probably also be appreciated by the caller
 });
}

in the case if the second request case it wo't be processed. But, I want like once the first request was processed until that the second has to be in a waiting state. Once the it got the first request promise then it has to process second request. — satya, Sep 22 '17 at 02:15
@satya I have updated the answer to reflect this information. — Alex AIT, Sep 22 '17 at 05:37
Thanks. It worked fine for me. I made some changes related to my functionality. — satya, Sep 24 '17 at 17:48

score 1 · Answer 2 · answered Sep 21 '17 at 19:23

You can use the async: false in ajax call, but this feature is deprecated. The best idea is create one control var.

   var requestSucceded = false;
   var get = function() {
      var global = [];
        if (Object.keys(global).length && requestSucceded)
          return global;
        ajaxcall({
          // ...
        }).done(function(data) {
          global = data;
          requestSucceded = true;
        }).fail(function(err) {
      });
   }

score 0 · Answer 3 · answered Sep 21 '17 at 19:23

0

Perform your second request in the callback of your first request.

var get = function() {
  var global = [];
    if (Object.keys(global).length)
      retrun global;
    ajaxcall({
      // ...
    }).done(function(data1) {
      global = data1;

      //perform second request here, return data2

    }).fail(function(err) {
    });
  }

Your second request won't execute until the first one has succeeded and invoked its callback.

answered Sep 21 '17 at 19:23

Spartacus

1,468
2
15
29

In cannot why because the both requests are independent requests. – satya Sep 22 '17 at 02:18
That really doesn't make sense. It doesn't matter that they're independent, in fact it's even better that they are. If you want to wait until the first call is done, the only way to execute the second request in tandem is to do it in the callback (in your `.done()` method) or use a Promise. – Spartacus Sep 22 '17 at 15:33

score 0 · Answer 4 · answered Sep 21 '17 at 19:30

You can use Promises API to solve this problem in an elegant manner.

//call.js
var DataPromise = new Promise(function(resolve, reject) {
    ajaxcall({
          // ...
        }).done(resolve).fail(reject);
   });



//a.js
DataPromise.then(function(data) { console.log("a.js now has the data"); });


//b.js
DataPromise.then(function(data) { console.log("b.js now has the data"); });

The Promises API will take care of tracking what is the status of DataPromise and ensure ajaxcall is issued only once.

score 0 · Answer 5 · answered Sep 21 '17 at 19:33

The $.ajax function, in jQuery, returns a jQuery XMLHttpRequest object, or jqXHR. That object can be stored, and functions can be run on it.

The best option would be to store the returned jqXHR or XMLHttpRequest in a globally accessible variable. In each of the two functions, check to see if that globally accessible variable is null. If it is, then run it. Once the ajaxcall has completed, clear the varname:

varname = ajaxcall({
    // ...
})
// ...
.always(function(){
    varname = null;
);

How to two async calls Synchronously in javascript?

5 Answers5