Promise で resolve/reject が呼ばれても処理は中断しない

またしても Promise まわりの勘違いにより、どハマリしたので書いておく。

resolve() や reject() が呼ばれただけでは処理は中断しない

new Promise((resolve, reject) => {
    console.log('before');
    resolve();
    console.log('after');
})
    .then(() => console.log('then'))
    .catch(() => console.log('catch'));

実行結果

before
after
then

---

new Promise((resolve, reject) => {
    console.log('before');
    reject();
    console.log('after');
})
    .then(() => console.log('then'))
    .catch(() => console.log('catch'));

実行結果

before
after
catch

どちらの例もバッチリ console.log('after') が実行されている。

対策

resolve() / reject() の呼び出しと一緒に return しておく。

new Promise((resolve, reject) => {
    console.log('before');
    return resolve();
    console.log('after');
})
    .then(() => console.log('then'))
    .catch(() => console.log('catch'));

実行結果

before
then

これで console.log('after') は実行されない。

【余談】resolve() と reject() を両方呼ぶとどうなるか

new Promise((resolve, reject) => {
    console.log('before');
    resolve();
    reject();
    console.log('after');
})
    .then(() => console.log('then'))
    .catch(() => console.log('catch'));

答えは先に呼ばれたもの勝ち。

後から呼ばれた reject() の catch() の処理は実行されない。

実行結果

before
after
then