フロントエンドをVue.jsでwebアプリを開発しています。
フロントエンドからバックエンドへの通信にはaxios(JavaScriptのライブラリ)を利用しています。
今回、webアプリ開発の中で、httpリクエストが失敗したときどのように処理するのか、
調査したことがありますので、まとめてみたいと思います。

参考サイト

-「vue.jsを使ってaxiosを学ぶ」
https://reffect.co.jp/vue/vue-axios-learn/
-「axiosの基本的な使い方」
https://qiita.com/s_taro/items/30114cfa370aac6c085f
-「github axios error-types」
https://github.com/axios/axios#error-types

try {
  const response = await axios.get('/user?ID=12345');
} catch (error) {
  // axiosの処理にエラーが発生した場合に実行される
  console.log(error);
  // errorの中身を詳しく見ることができる
  console.log(JSON.stringify(error))
  console.log(error.toJSON());
} finally {
  console.log('finally');
}

エラー内容

axiosの処理で発生したerrorは、以下のプロパティで定義されています。

axiosのエラー

プロパティ名	内容	例
message	エラーメッセージの要約	"Network Error", "timeout of 10000ms exceeded"
name	エラーの原因がどこにあるのかを表す	Error, AxiosError
stack	エラー時のスタックトレース	(省略)
config	実行したHTTPリクエストでaxiosに設定していた値	{"timeout": 10000}
code	axios内部でのエラーを識別するコード	"ERR_NETWORK"
status	HTTPレスポンスのステータスコード	200, 404, null

axios内部でのエラーを識別するコード例(errorのプロパティcode)

コード値	内容
ERR_BAD_OPTION_VALUE	axiosに無効な値が設定されている
ECONNABORTED	axiosで設定したタイムアウト時間を超えたとき発生
ERR_NETWORK	ネットワーク関連の問題

サンプル

レスポンスまでの時間が長すぎる場合を切り分けたい処理例は、以下になります。

try {
  const response = await axios.get('/user?ID=12345');
} catch (error) {
  if (error.code === 'ECONNABORTED') {
    // タイムアウト発生
    console.log('time out');
  } else {
    // その他エラー
    console.log(error);
  }
} finally {
  console.log('finally');
}

まとめ

HTTP通信を使ったアプリ開発の知識はまだまだなので、実際に触りながら知識を深めたいと思いました。

axiosを使ったHTTPリクエストエラー処理

参考サイト

目次

axios

エラー内容

サンプル

まとめ