ES6 Javascript Promise - execute after .then() is called

Question

If you want to execute code after a callback is called in JavaScript, then you can just place it after the callback:

function demoCallback(callback) {
  callback()
  console.log("I execute second")
}

demoCallback(() => {
  console.log("I execute first")
})

Is it possible to do the same thing with an ES6 Promise from within the scope of the function? Let's say I have a function that returns a Promise:

function demoPromise() {
  return new Promise((resolve, reject) => {
    resolve()
    console.log("I execute first")
  })
}

demoPromise().then(() => { console.log("I execute second") })

The Code inserted after resolve executes once the Promise is resolved, but before then is called outside the scope of the function. Is there a way that I can execute code after both, but do so from within the scope of the function?

Answer 1

Is it possible to do the same thing with an ES6 Promise from within the scope of the function?

No, this isn't possible. then callbacks always run asynchronously, and that includes being asynchronous in regard to the resolve() call.

(That said, promise callbacks are queued, so you can abuse that queue to get your code behind the other:

function demoPromise() {
  const p = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
      p.then(() => {
        console.log("I execute second");
      }); // because I will be scheduled second
    }, 1000);
  });
  return p;
}

demoPromise().then(() => {
   console.log("I execute first");
}); // because I was scheduled first

But please don't do that)

If you want to execute code after a callback is called in JavaScript

then you probably should not just return a promise. Take a callback that does what you want before executing your code:

function demoPromise(callback) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
  }).then(() => {
    return callback();
  }).then(res => {
    console.log("I execute second");
  });
}

demoPromise(() => {
   console.log("I execute first");
}).then(() => {
   console.log("I execute last");
});

This is known as the disposer pattern and very useful for handling resources.

Answer 2

You can resolve the Promise with a function that can be called in a then block. So long as that function is called within the block, you can execute code before it like so

function demoPromise() {
  return new Promise((resolve, reject) => {
    resolve(function(){
        console.log("I execute second")
    });
  })
}

demoPromise().then(f => { console.log("I execute first");f();})