How can I wait for a JavaScript Promise to resolve before continuing function execution?

General Discussions
,
1

Hello Hello everyonee!!

I’m currently grappling with a common challenge in unit testing involving Promises and iFrames, and I’m hoping for some collective wisdom here.

I’m doing some unit testing where the test framework loads a page into an iFrame and runs assertions against it. Before each test, I create a Promise that sets the iFrame’s onload event to call resolve(), sets the iFrame’s src, and returns the promise. This way, I can call loadUrl(url).then(myFunc) to wait for the page to load before running myFunc.

I use this pattern frequently, especially to allow DOM changes to occur, like mimicking button clicks and waiting for divs to hide or show.

The problem is I’m constantly writing short anonymous functions, and the test function that creates the promises finishes before they resolve. Is there a way in JavaScript to “wait” for a Promise to resolve—like blocking or yielding—so I can get the result in the correct order without relying on .then() chains?

For example, here’s a simplified version of the pattern I’m using:

JavaScriptfunction kickOff() {
  return new Promise(function(resolve, reject) {
    $("#output").append("start");

    setTimeout(function() {
      resolve();
    }, 1000);
  }).then(function() {
    $("#output").append(" middle");
    return " end";
  });
};

function getResultFrom(promise) {
  // How to implement this to wait until promise resolves?
  return " end";
}

var promise = kickOff();
var result = getResultFrom(promise);
$("#output").append(result);

How can I handle this to wait for the promise to resolve properly in JavaScript, making the flow more linear?

Any patterns or modern JS features that can help here would be amazing! Thanks a bunch in advance! :smiley:

3

Hello @MiroslavRalevic!

The best modern way to achieve that clean, sequential flow you’re looking for is indeed with async/await. It brilliantly lets you write code that looks synchronous but actually waits for the Promise to resolve without freezing anything.

For your getResultFrom example, here’s how you could structure it:

JavaScriptasync function getResultFrom(promise) {
  const result = await promise;
  return result;
}

And then, how you might use it to call your kickOff function:

(async () => {
  var promise = kickOff();
  var result = await getResultFrom(promise);
  $("#output").append(result);
})();

This way, your code pauses at await until the Promise fully finishes, ensuring you get the value in the right order without those messy .then() chains. It transforms complex asynchronous logic into something much more readable.

Hope this solidifies your understanding of async/await’s power! Thank me later!!

4

Hello @MiroslavRalevic and @prynka.chatterjee!!!

If you find yourself in older environments where async/await isn’t available, you absolutely need to keep using .then() for handling Promises. However, you can still simplify the flow by chaining your logic:

kickOff().then(result => {
  $("#output").append(result);
});

It’s important to remember that this isn’t “blocking” code in the traditional sense, but this is fundamentally how JavaScript handles asynchronous operations. You trigger what happens after the Promise resolves directly inside the .then() callback. It’s just a different mindset compared to writing synchronous code, but a powerful one once you get the hang of it.

This provides a clear path for older environments!

Hope this helps!!

5

Hey @MiroslavRalevic! Now adding a final cautionary note and reinforcing the core principle of JavaScript’s asynchronous nature.

While some might suggest a hacky way to block using a loop, that approach will unfortunately freeze the browser and create a really bad user experience. So, it’s something to actively avoid.

JavaScript is inherently asynchronous when dealing with Promises, so your absolute best bet is to fully embrace async patterns (async/await or .then()).

Thank you!! Hope this helps