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
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.