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

Question

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    x000D   x000D  function kickOff     x000D    return new Promise function resolve  reject    x000D          output   append  start    x000D       x000D      setTimeout function     x000D        resolve    x000D         1000   x000D       then function     x000D          output   append   middle    x000D      return   end   x000D        x000D     x000D   x000D  function getResultFrom promise    x000D       todo x000D    return   end   x000D    x000D   x000D  var promise   kickOff    x000D  var result   getResultFrom promise   x000D      output   append result   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  output  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can do it manually   I know  that that isn t great solution  but    use while loop till the result hasn t a value  kickOff   then function result       while true          if  result     undefined  continue         else                   output   append result               return

User · Answer

Another option is to use Promise all to wait for an array of promises to resolve and then act on those  Code below shows how to wait for all the promises to resolve and then deal with the results once they are all ready  as that seemed to be the objective of the question   Also for illustrative purposes  it shows output during execution  end finishes before middle    x000D   x000D  function append output suffix  value          output   suffix  append value     function kickOff       let start   new Promise  resolve  reject    gt        append output  now    start       resolve  start          let middle   new Promise  resolve  reject    gt        setTimeout      gt          append output  now     middle         resolve   middle          1000         let end   new Promise  resolve  reject    gt        append output  now     end       resolve   end           Promise all  start  middle  end   then results   gt        results forEach        result   gt  append output  later   result           kickOff   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  Updated during execution   lt div id  output now  gt  lt  div gt  Updated after all have completed   lt div id  output later  gt  lt  div gt  x000D   x000D   x000D

User · Answer

If using ES2016 you can use async and await and do something like    async      gt      const data   await fetch url    myFunc data         If using ES2015 you can use Generators  If you don t like the syntax you can abstract it away using an async utility function as explained here   If using ES5 you ll probably want a library like Bluebird to give you more control   Finally  if your runtime supports ES2015 already execution order may be preserved with parallelism using Fetch Injection

User · Answer

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 for many 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 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 return output in a guaranteed order - like this   start middle end   Update in 2018  three years after this answer was written     If you either transpile your code or run your code in an environment that supports ES7 features such as async and await  you can now use await to make your code  appear  to wait for the result of a promise   It is still developing with promises   It does still not block all of Javascript  but it does allow you to write sequential operations in a friendlier syntax   Instead of the ES6 way of doing things   someFunc   then someFunc2  then result   gt           process result here    catch err   gt           process error here       You can do this      returns a promise async function wrapperFunc         try           let r1   await someFunc            let r2   await someFunc2 r1              now process r2         return someValue         this will be the resolved value of the returned promise       catch e            console log e           throw e          let caller know the promise was rejected with this reason          wrapperFunc   then result   gt           got final result    catch err   gt           got error

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

Examples related to javascript

Examples related to asynchronous

Examples related to promise

Examples related to async-await

Examples related to ecma