What is the best way to execute two asynchronous calls sequentially in JavaScript?

Question

What is the best way to execute two asynchronous calls sequentially in JavaScript?

When using a common generic function for AJAX calls, the initial request retrieves all data from the server and maintains it within local scope. However, subsequent requests are still hitting the server, even when the data is already available locally. This issue occurs because the first request is asynchronous and the processing of the second request begins before the first one is completed. How can we ensure that the second request waits until the first one finishes?

a.js invokes call.js, which contains the AJAX call: get();

b.js also calls the same function. If the data is already in the global variable during the second call, no additional AJAX call should be made: get();

call.js:

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

In this scenario, the issue arises because the second request is initiated while the first one is still being processed, resulting in unnecessary duplicated calls to the server.

javascript jquery ajax asynchronous

Answer 1

Answer №1

If you want to ensure only one request is sent to the server at a time, with subsequent requests waiting until the first one is completed

This question has already been answered and requires additional code. For examples, consider searching for "ajax queue" keywords.

Queue AJAX calls

Sequencing ajax requests

It is recommended to use available libraries for this scenario. However, the initial response also includes sample code without the need for an external library.

To send just one request and store the result in cache

The usual approach is to track the 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 the specific requirements, further modifications may be necessary. A more typical API design would involve immediately returning the data if it's already loaded, or executing a callback upon completion:

var isCallInProgress = false;
var global = [];
var get = function(returnCallback) {
 if (Object.keys(global).length){
   // execute callback immediately
   // consider wrapping this in a promise or setTimeout for desired behavior
   returnCallback(global);
 } 

 if (isCallInProgress)
   return;         

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

   // async callback
   returnCallback(global);

 }).fail(function(err) {
     // error handling might also be useful for the caller
 });
}

Answer 2

If you want to ensure only one request is sent to the server at a time, with subsequent requests waiting until the first one is completed

This question has already been answered and requires additional code. For examples, consider searching for "ajax queue" keywords.

Queue AJAX calls

Sequencing ajax requests

It is recommended to use available libraries for this scenario. However, the initial response also includes sample code without the need for an external library.

To send just one request and store the result in cache

The usual approach is to track the 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 the specific requirements, further modifications may be necessary. A more typical API design would involve immediately returning the data if it's already loaded, or executing a callback upon completion:

var isCallInProgress = false;
var global = [];
var get = function(returnCallback) {
 if (Object.keys(global).length){
   // execute callback immediately
   // consider wrapping this in a promise or setTimeout for desired behavior
   returnCallback(global);
 } 

 if (isCallInProgress)
   return;         

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

   // async callback
   returnCallback(global);

 }).fail(function(err) {
     // error handling might also be useful for the caller
 });
}

Answer 3

Answer №2

If you want to avoid using the async: false in an ajax call, consider utilizing a control variable instead for better efficiency.

   var requestCompleted = false;
   var fetchData = function() {
      var globalData = [];
        if (Object.keys(globalData).length && requestCompleted)
          return globalData;
        ajaxRequest({
          // ...
        }).done(function(response) {
          globalData = response;
          requestCompleted = true;
        }).fail(function(error) {
      });
   }

Answer 4

If you want to avoid using the async: false in an ajax call, consider utilizing a control variable instead for better efficiency.

   var requestCompleted = false;
   var fetchData = function() {
      var globalData = [];
        if (Object.keys(globalData).length && requestCompleted)
          return globalData;
        ajaxRequest({
          // ...
        }).done(function(response) {
          globalData = response;
          requestCompleted = true;
        }).fail(function(error) {
      });
   }

Answer 5

Answer №3

Make sure to execute your second request within the callback function of your first request.

var fetch = function() {
  var storage = [];
    if (Object.keys(storage).length)
      return storage;
    ajaxcall({
      // ...
    }).done(function(data1) {
      storage = data1;

      //execute second request here and retrieve data2

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

The second request will only be triggered once the first request is successful and its callback function is called.

Answer 6

Make sure to execute your second request within the callback function of your first request.

var fetch = function() {
  var storage = [];
    if (Object.keys(storage).length)
      return storage;
    ajaxcall({
      // ...
    }).done(function(data1) {
      storage = data1;

      //execute second request here and retrieve data2

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

The second request will only be triggered once the first request is successful and its callback function is called.

Answer 7

Answer №4

If you encounter a problem, one elegant solution is to utilize the Promises API.

//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 access to the data"); });


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

By using the Promises API, you can keep track of the status of DataPromise and ensure that ajaxcall is only executed once.

Answer 8

If you encounter a problem, one elegant solution is to utilize the Promises API.

//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 access to the data"); });


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

By using the Promises API, you can keep track of the status of DataPromise and ensure that ajaxcall is only executed once.

Answer 9

Answer №5

Using the $.ajax method from jQuery will give you a jqXHR object that can be saved and manipulated with different functions.

It is recommended to save this jqXHR or XMLHttpRequest in a variable that is accessible globally. In your functions, make sure to check if this global variable is null before executing any further actions. Once the ajax call is done, remember to clear the variable:

varName = ajaxCall({
    // ...
})
// ...
.always(function(){
    varName = null;
);

Answer 10

Using the $.ajax method from jQuery will give you a jqXHR object that can be saved and manipulated with different functions.

It is recommended to save this jqXHR or XMLHttpRequest in a variable that is accessible globally. In your functions, make sure to check if this global variable is null before executing any further actions. Once the ajax call is done, remember to clear the variable:

varName = ajaxCall({
    // ...
})
// ...
.always(function(){
    varName = null;
);

What is the best way to execute two asynchronous calls sequentially in JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to iterate through a puppeteer selector's response in a loop?

Using an image as an onclick trigger for a JavaScript function

Employing JavaScript to set a variable that changes dynamically

Calculating Time Difference in JavaScript Without Utilizing moment.js Library

404 Error: Enhancing RESTFul Service through Ajax

One way to generate div elements based on the number in an input field when a button is clicked, but ensuring it only happens once

Tips for retrieving a value from fs.accessAsync function

Firebase issue: The function ref.once is throwing an Uncaught TypeError and is not recognized

Using express to efficiently redirect from a search form?

The functionality of jquery ujs seems to be impaired when I try to load partials or content remotely using remote calls or

How to implement caching using XMLHttpRequest?

What is the method for sending an axios post request using the application/x-www-form-urlencoded content type?

Retrieve a variety of items and pass them to a view using the mssql module in Node

Extracting data from websites using Python's Selenium module, focusing on dynamic links generated through Javascript

When you open the responsive navigation bar, it automatically closes

Selecting CSS Properties with jQuery

Executing multiple HTTP requests simultaneously in groups using an asynchronous for loop for each individual request

The request made to `http://localhost:3000/auth/signin` returned a 404 error, indicating that

Tips for efficiently serving a static file without triggering a disk read

Tips for showcasing retrieved JSON with jQuery's ajax functionality