Async/Await moves on to the next function without waiting for the previous function to finish executing

Question

Async/Await moves on to the next function without waiting for the previous function to finish executing

I am developing a web application that requires querying my database multiple times. Each query depends on the data retrieved from the previous one, so I need to ensure each call completes before moving on to the next. I have attempted using async/await for this purpose, but it seems there may be an issue with my approach. Can someone provide guidance on the correct way to achieve this?

var firstCall = new XMLHttpRequest();
var firstCallData;
async function initiateFirstCall() {
  firstCall.open('GET', queryURL);
  firstCall.onload = function() {
    firstCallData = JSON.parse(firstCall.responseText);
  };
  firstCall.send();
};

async function displayData() {
  await initiateFirstCall();
  console.log(firstCallData);
}

displayData();

I have some experience in JavaScript, although I do not frequently write code in it and might not fully understand how async/await functions work. Any assistance or insights would be greatly appreciated!

javascript ajax async-await

Answer 1

Answer №1

The sendFirstCall method is not returning a meaningful Promise, so there isn't any need to use await. It may be worth considering using modern Promise functionality with tools like fetch or Axios instead of relying on the old XMLHttpRequest. You can wrap it in a Promise for better handling, like this:

function sendFirstCall() {
  return new Promise(function(resolve, reject) {
    firstCall.open('GET', queryURL);
    firstCall.onload = function() {
      firstCallData = JSON.parse(firstCall.responseText);
      resolve();
    };
    firstCall.send();
  });
}

I removed the async keyword from the function definition as it's unnecessary when manually returning a Promise that can still be awaited by consuming code.

Another approach would be resolving the Promise with the data itself:

function sendFirstCall() {
  return new Promise(function(resolve, reject) {
    firstCall.open('GET', queryURL);
    firstCall.onload = function() {
      resolve(JSON.parse(firstCall.responseText));
    };
    firstCall.send();
  });
}

Then, the consuming code can simply await the result:

firstCallData = await sendFirstCall();

This way, the operation remains free of side effects and just returns a value asynchronously for the consuming code to handle.

You could also utilize the reject callback within the Promise to manage errors if the XMLHttpRequest fails or encounters an error. Otherwise, the failure would go unnoticed, and the Promise would never be resolved or rejected.

Answer 2

The sendFirstCall method is not returning a meaningful Promise, so there isn't any need to use await. It may be worth considering using modern Promise functionality with tools like fetch or Axios instead of relying on the old XMLHttpRequest. You can wrap it in a Promise for better handling, like this:

function sendFirstCall() {
  return new Promise(function(resolve, reject) {
    firstCall.open('GET', queryURL);
    firstCall.onload = function() {
      firstCallData = JSON.parse(firstCall.responseText);
      resolve();
    };
    firstCall.send();
  });
}

I removed the async keyword from the function definition as it's unnecessary when manually returning a Promise that can still be awaited by consuming code.

Another approach would be resolving the Promise with the data itself:

function sendFirstCall() {
  return new Promise(function(resolve, reject) {
    firstCall.open('GET', queryURL);
    firstCall.onload = function() {
      resolve(JSON.parse(firstCall.responseText));
    };
    firstCall.send();
  });
}

Then, the consuming code can simply await the result:

firstCallData = await sendFirstCall();

This way, the operation remains free of side effects and just returns a value asynchronously for the consuming code to handle.

You could also utilize the reject callback within the Promise to manage errors if the XMLHttpRequest fails or encounters an error. Otherwise, the failure would go unnoticed, and the Promise would never be resolved or rejected.

Async/Await moves on to the next function without waiting for the previous function to finish executing

Answer №1

Similar questions

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?

Manipulating a global variable in VueJS

"Enhancing User Experience with jQuery: Implementing a Smooth Scroll Feature with Current

React component failing to update when props change

Lambda function failing to execute Auth0 methods through the Auth0 node-auth0 SDK

What is the method to effectively conduct a testing procedure for JavaScript files that have been exported using

Sending state information through props in a Vuex environment

Can the server determine if a Parse user is currently logged in?

Hovering over the child element, instead of the parent

Issue encountered while utilizing combineReducers: "Error: The assetsReducer returned an undefined value during initialization."

Generating a primary XML element encompassing multiple namespaces

Ways to confirm the actual openness of Express app's connection to MongoDB?

Issue: The plugin 0 mentioned in the file "/my dir/node_modules/babel-preset-php/src/index.js" contains an invalid property called "default"

What is the best way to create a new row at a specific index in an ng-repeat loop?

ajax-triggered forms

The double click functionality does not seem to be functioning within the Backbone View

Encountering an error in AngularJS $http calls while trying to loop: TypeError - object is not functioning

changing button text in ajax upon successful completion

There seems to be this strange and unexpected sharing of Animated.View and useRef between different child components