プログラミング フロントエンド

【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); // ★1
  });
  return console.log('runFunc return'); // ★2
};

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

 

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

sampleFunc1が成功したとき→★2をreturn
sampleFunc1が失敗したとき→★1を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()でつなぐのが簡単な修正方法です。

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

スポンサーリンク

-プログラミング, フロントエンド
-

© 2021 エンジニア×ライフハック Powered by AFFINGER5