How to wait for a JavaScript Promise to resolve before resuming function?

Spread the love

Question Description

I’m doing some unit testing. The test framework loads a page into an iFrame and then runs assertions against that page. Before each test begins, I create a Promise which sets the iFrame’s onload event to call resolve(), sets the iFrame’s src, and returns the promise.

So, I can just call loadUrl(url).then(myFunc), and it will wait for the page to load before executing whatever myFunc is.

I use this sort of pattern all over the place in my tests (not just for loading URLs), primarily in order to allow changes to the DOM to happen (e.g. mimick clicking a button, and wait for divs to hide and show).

The downside to this design is that I’m constantly writing anonymous functions with a few lines of code in them. Further, while I have a work-around (QUnit’s assert.async()), the test function that defines the promises completes before the promise is run.

I’m wondering if there is any way to get a value from a Promise or wait (block/sleep) until it has resolved, similar to .NET’s IAsyncResult.WaitHandle.WaitOne(). I know JavaScript is single-threaded, but I’m hoping that doesn’t mean that a function can’t yield.

In essence, is there a way to get the following to spit out results in the correct order?

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

function getResultFrom(promise) {
  // todo
  return " end";
}

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

Practice As Follows

I’m wondering if there is any way to get a value from a Promise or
wait (block/sleep) until it has resolved, similar to .NET’s
IAsyncResult.WaitHandle.WaitOne(). I know JavaScript is
single-threaded, but I’m hoping that doesn’t mean that a function
can’t yield.

The current generation of Javascript in browsers does not have a wait() or sleep() that allows other things to run. So, you simply can’t do what you’re asking. Instead, it has async operations that will do their thing and then call you when they’re done (as you’ve been using promises for).

Part of this is because of Javascript’s single threadedness. If the single thread is spinning, then no other Javascript can execute until that spinning thread is done. ES6 introduces yield and generators which will allow some cooperative tricks like that, but we’re quite a ways from being able to use those in a wide swatch of installed browsers (they can be used in some server-side development where you control the JS engine that is being used).


Careful management of promise-based code can control the order of execution of a bunch of async operations.

I’m not sure I understand exactly what order you’re trying to achieve in your code, but you could do something like this using your existing kickoff() function and then just attaching a .then() handler to it after calling it:

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

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

kickoff().then(function(result) {
    // use the result here
    $("#output").append(result);
});

This will give you output like this in a guaranteed order:

start
middle
end

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.