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

If using ES2016 you can use async and await and do something like:

(async () => {
  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.

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).

function append_output(suffix, value) {
  $("#output_"+suffix).append(value)
}

function kickOff() {
  let start = new Promise((resolve, reject) => {
    append_output("now", "start")
    resolve("start")
  })
  let middle = new Promise((resolve, reject) => {
    setTimeout(() => {
      append_output("now", " middle")
      resolve(" middle")
    }, 1000)
  })
  let end = new Promise((resolve, reject) => {
    append_output("now", " end")
    resolve(" end")
  })

  Promise.all([start, middle, end]).then(results => {
    results.forEach(
      result => append_output("later", result))
  })
}

kickOff()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Updated during execution: <div id="output_now"></div>
Updated after all have completed: <div id="output_later"></div>

Because of its single-threaded model, JavaScript does not provide a wait() function out of the box; instead, the async/await keywords are the best practice.

However, being curious, it is theoretically possible, though unwise, discouraged and anti-pattern, to simply wait for a Promise to resolve.

import deasync from 'deasync'

function blockForPromiseSync<T>(p: Promise<T>): T {
    let result: T | undefined = undefined;
    let error: any | undefined = undefined;

    p.then(value => { result = value })
        .catch(err => { error = err })

    deasync.loopWhile(() =>
        result === undefined && error === undefined)

    if (error !== undefined) {
        throw error!
    }
    return result!
}

async function fetchFromServer(): Promise<string> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('hello')
        }, 2000)
    })
}

console.log('start')
const result = blockForPromiseSync(fetchFromServer())
console.log(result)
console.log('done')

prints:

start
hello
done

If we replace deasync.loopWhile with while keyword, the loop won't end because the only thread is "occupied" and there will be no chance for p to resolve.

However, the library deasync keeps the V8 engine responsive by

module.exports.loopWhile = function (pred) {
    while (pred()) {
        process._tickCallback()
        if (pred()) binding.run()
    }
}

where process._tickCallback() clears the micro-task queue and ends current cycle of event loop to allow V8 to handle other Promises, and binding.run() invokes

Napi::Value Run(const Napi::CallbackInfo& info) {
  Napi::Env env = info.Env();
  Napi::HandleScope scope(env);
  uv_run(node::GetCurrentEventLoop(v8::Isolate::GetCurrent()), UV_RUN_ONCE);
  return env.Undefined();
}

that processes remaining events in the event queue and escapes from the while loop.

Use await/async on promises to await them before your synchronous code:

// you must await the promises into this nested await/async
await (async () => {
  console.debug('1');
  await Promise.resolve('1');
  console.debug('2');
  await Promise.resolve('2');
})(); // /!\ do not forget the ()

// your follow-up synchronous code
console.debug('3');

which outputs 1 then 2 then 3 in expected order.

In your case,

var result;
await (async () => {
  var promise = kickOff();
  result = await promise;
  // some other promises to await if you like
})();

result = getResultFrom(result); // if getResultFrom makes sense and is synchronous
$("#output").append(result);

I've made a tiny wrapper/kernel to deal with async / non async callback dependencies in an event fashion way (and it was very interesting for my self comprehension).

Under the hood the kernel does the small-but-not-so-easy-to-understand Promise chaining logic.

It create an event object that can be use to pass an applicative context along the (masked) promise chain.

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// your start
qk.addEventListener('my_kickoff_event', async (e) => {
    $("#output").append("start");
    await timeout(1000);
}, 'start');

// your middle
qk.addEventListener('my_kickoff_event', (e) => {
    $("#output").append(" middle");
}, 'middle', 'start'); // <<< dependency: middle needs start

// kickoff and end
qk.dispatchEvent(new QKE('my_kickoff_event')).then((e) => {
   // it's still only Promise in the end
   $("#output").append(" end");
});
// or await qk.dispatchEvent(new QKE('my_kickoff_event'));

It was not done to be the best performance-wise solution but to be easy to use across a typical app with many components that cannot easily share promises variables.

more here

try live snippet