JavaScript

【JavaScript】async/awaitで例外をcatchする

どうも、つよぽんです!

今回は、「JavaScriptのasync/awaitで例外処理をする方法」について解説していきます。

具体的にはPromiseの実装と比較しながらサンプルコードを使い説明していきます。

async/awaitの概要に関しては、以前書いた「JavaScriptのasyncとawaitとは【概要の解説】」で解説しているので「async/await」を知らない方は先にそちらの記事を読むことをオススメします。

あわせて読みたい
JavaScriptのasyncとawaitとは【概要の解説】JavaScriptのPromiseを同期処理のように記述できる「async/await」の概要について解説します。Promiseをつかうことでコールバック地獄の解消が出来ますが、async/awaitをつかうことでコールバック関数自体を記述することがなくなります。...

今回の記事は次のような方に向けて書きました。

想定読者
  • JavaScriptのPromiseを理解している
  • JavaScriptのasync/awaitの概要を理解している

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • JavaScriptのasync/awaitを使うときにも例外処理を実装できるようになる

今回の記事の内容は以下のスライドの解説記事となっております。今回の解説記事と以下のスライド記事をあわせて使うことでより深く学習できます。

あわせて読みたい
【JavaScript】async/awaitでの例外処理の方法今回はasync/awaitでの例外処理の方法を学習します。JavaScriptのPromiseで例外が発生したときの処理の方法を覚えていますか?Promiseの例外処理はcatchメソッドを利用します。async/awaitを使うときはcatchメソッドの代わりにtry-catchを利用します。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptのasync/awaitの例外処理は「try-catch文」を使う
  2. JavaScriptのPromiseとasync/awaitの例外処理の比較(サンプルコード付き)

JavaScriptのasync/awaitの例外処理はtry…catchを使う

JavaScriptのasync/awaitを使うときに例外処理の実装をしたいときは「try…catch」を使います。

「try…catch」を初めて知った人のために簡単に説明すると、「try…catch」はasync/awaitのためだけの機能ではなく、JavaScriptのプログラム全体で例外が発生する可能性があるところに利用できる構文です。

例外が発生してもプログラムを止めずに適切な処理をすることを「例外をキャッチする」と言ったりもします。

Promiseオブジェクト内で発生した例外に関しては、以前書いた記事「【JavaScript】Promiseのcatchの使い方」でも説明したとおり、catchメソッドをつかって例外をキャッチします。

しかし、async/awaitを使うときはPromiseオブジェクトのthen・catchメソッドを使わず、同期処理のような書き方をするので一般的にcatchメソッドを使いません。

そのため、Promiseのcatchメソッドを使う代わりに、JavaScript全体で利用できる「try…catch」をつかって対応することになります。

JavaScriptのPromiseとasync/awaitの例外処理の比較(サンプルコード付き)

それでは、「Promiseでcatchメソッドを使って例外処理を行うときの実装」と、「async/awaitとtry..catchを使って例外処理を行うときの実装」をサンプルコードを使って見ていきましょう。

下の画像の「緑枠内のコードがPromiseのcatchメソッドで例外処理をしている実装」、「オレンジ枠内がasync/awaitとtry..catchで例外処理をしている実装」になります。

細かい処理の流れは画像内に記述している説明文の参照して頂けたらと思います。(画像をクリックすると別タブで画像が開きます)

Promiseとasync/awaitの例外処理比較のサンプルコードPromiseとasync/awaitの例外処理比較のサンプルコード

上の画像内のサンプルコードは以下のリンクから直接確認できます。

Promiseとasync/awaitの例外処理のサンプルコード

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • JavaScriptのasync/awaitを使うときに例外処理を実装するには「try…catch」を使う
  • Promiseで例外処理を実装するときにはcatchメソッドを使っていた

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【JavaScript】async/awaitでの例外処理の方法今回はasync/awaitでの例外処理の方法を学習します。JavaScriptのPromiseで例外が発生したときの処理の方法を覚えていますか?Promiseの例外処理はcatchメソッドを利用します。async/awaitを使うときはcatchメソッドの代わりにtry-catchを利用します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です