フロントエンドを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
目次
axios
axiosとは、非同期通信ベースでHTTPリクエスト実行するJavaScriptのライブラリ。
axiosを使うことで、HTTPリクエストの実装を簡単に行うことができる。
詳しい導入方法は、参考サイトなどから調査しました。
使い方の例をasync,awaitと使ったGETメソッドで書くと以下のようになります。
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通信を使ったアプリ開発の知識はまだまだなので、実際に触りながら知識を深めたいと思いました。