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

What is preventing Safari and Firefox from properly handling audio data from MediaElementSource?

During bundling, utilize an npm script to copy the package.json file to the dist directory

DOM not rendering Angular function output successfully

typescript - instantiate an object using values stored in an array

Tips for calculating the total of each row and column in a table with jQuery

Tips for effectively utilizing Vuelidate to display errors selectively after the user has completed input:

"Upload a video file and use JavaScript to extract and save the first frame as an image

Is it possible for any scripting language to interpret AJAX/JavaScript on a Linux platform?

What is the best way to know which API will return the result the fastest?

The most efficient method for distributing code between TypeScript, nodejs, and JavaScript

Establishing the state in a separate React component

During the rendering process, the property "instance" was attempted to be accessed but is not defined

CSS translation animation fails to execute successfully if the parent element is visible

Utilize ES6 syntax to bring in a package as an extension of another package

Experience a seamless front/back DIV transition with a mouseover effect similar to the ones on USAT

Creating a repository of essential functions in AngularJSDiscover the steps to set up a

When attempting to decode a base64 image or pdf in PHP, the process fails if the file size exceeds 500kb

What are some ways to create a div section within a Google Map interface?

Having trouble deciding between Real AJAX and ASP.NET AJAX?

Maintain scrolling at the bottom with React.js