How do I use .then() after a new Promise is resolved, before returning the whole function as resolved

promo()
    .then((e) => console.log("finished everything"))
    .catch((e) => console.log("failed everything"))
    .finally((e) => console.log("done", e));

function promo() {
    console.log("awaiting promise");
    return new Promise((resolve, reject) => {
        setTimeout((e) => {
            console.log("done with first promise");
            resolve("done");
        }, 2000);
    }).then((e) => {
        console.log("starting second promise");

        new Promise((resolve) => {
            setTimeout((e) => {
                console.log("done with second promise");
                resolve("done2");
            }, 2000);
        });
    });
}

how do I make it so promo() doesn’t finish until the second .then() is finished? right now it returns it as soon as the first promise ends, and the .then() is triggered after finally();

here is the output:

awaiting promise
done with first promise
starting second promise
finished everything 
done 
done with second promise

but what I expect is:

awaiting promise
done with first promise
starting second promise
done with second promise
finished everything 
done 

Answer

You’re missing a return:

}).then((e) => {
  console.log("starting second promise");
//VVVVVV
  return new Promise((resolve) => {
    setTimeout((e) => {
      console.log("done with second promise");
      resolve("done2");
    }, 2000);
  });
});

Any time you call .then on a promise, you create a new promise. If you return a promise in the .then callback, then your new promise will resolve with whatever that returned promise resolves to. If instead you return a non-promise value, then the new promise resolves to that value, with no additional delay. Since you’re implicitly returning undefined, your new promise resolves to undefined as soon as the first promise is done.