【Javascript】await/async処理でreturnしたのに後続処理が流れてしまう問題

こんにちは！

今回は「await/asyncでの処理順における注意点について」お伝えしたいと思います。

「Javascriptでawait/async処理をなんとなく使っていたが、思うような処理がreturnされない」という方に参考になれば嬉しいです。

returnしたのに後続処理が流れてしまう問題...

サンプルコードを例に説明します。

const sampleFunc1 = () => {
  return new Promise((resolve, reject) => {
    reject('err occuerd'); // rejectを返します
  });
};

const runFunc = async () => {
  await sampleFunc1().catch((err) => {
    return console.log(err); // ★１
  });
  return console.log('runFunc return'); // ★２
};

runFunc();
// console出力結果
// "err occuerd"
// "runFunc return"

結果..★１の部分でreturnを記述しているのにも関わらず、★２のreturnまで流れてしまっています。

sampleFunc1が成功したとき→★２をreturn
sampleFunc1が失敗したとき→★１をreturnしたい場合、以下のように修正します

const sampleFunc1 = () => {
  return new Promise((resolve, reject) => {
    reject('err occuerd'); // rejectを返します
  });
};

const runFunc = async () => {
  await sampleFunc1().then(() => {
    return console.log('runFunc return');
  }).catch((err) => {
    return console.log(err);
  });
};

runFunc();

このように.then().catch()でつなぐのが簡単な修正方法です。

以上、お疲れさまでした〜