Vue.js + Laravel8.4でAxiosのエラーハンドリングしてみる

##【開発環境】
Windows 10 HOME
PHP 7.4.7
MySQL

Laravel Framework 8.4
vue            : 2.6.12
vue-router   : 3.5.1
vee-validate : 3.4.9
vue-axios-interceptors : 0.3.2

##【目次】

|  | 　　項目　　　　　|
|:----:|:-------------|
| - | [はじめに](#はじめに) |
| - | [前提条件](#前提条件) |
| - | [使い方](#使い方) |
| - | [最後に](#最後に) |
| - | [参考](#参考) |




#はじめに

Vue.js + Laravel8.4でAxios(Ajax)のエラーハンドリングしてみました。


Vue.js + Laravelの勉強をしており、
下記の記事を見て動かしてみましたが
CRUDの最小構成のシステムで
もっと機能を追加したという事で、今回の記事にしたという経緯です。
(2021年6月11日現在)

[Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2)

Vue.jsとLaravelによるSPA記事で下記の記事で構成しています。
(未リンクの記事はこれから作成予定)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

[Vue.js + Laravel8.4でVeeValidateを使ってバリデーションしてみる](https://qiita.com/silversink8888/items/e0e90f1851c7475cea3a)

[**Vue.js + Laravel8.4でAxiosのエラーハンドリングしてみる**](https://qiita.com/silversink8888/items/51c8ced17600ca17604f#%E4%BD%BF%E3%81%84%E6%96%B9)
<font color="red">**↑↑↑↑↑↑今回はここです↑↑↑↑↑↑**</font>


[Vue.js + Laravel8.4でLaravel側もバリデーションしてみる]
[Vue.js + Laravel8.4でLaravel側のAPIの認証処理してみる]
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


[Github](https://github.com/silversink8888/vue-laravel-spa)
でもソースを公開していますので参考にして下さい。

#前提条件

参考にさせて頂いた記事との開発環境の相違箇所。

・Laravel のバージョンが異なる

Laravel 6.*

```
App\Task;
```
↓

Laravel 8.4

```
App\Models\Task;
```

上記のようにLaravel 8.*ではコントローラーのパスが
変更されていますので適宜変更して下さい。

・入力項目のCSSを若干変更しています。
・DBはMySQLを使用


#使い方

``＜script＞`` 部分の修正。

```resources/js/components/TaskCreateComponent.vue
<script>
・・・

getTasks() {
axios.get('/api/tasks')
.then((res) => {
    this.tasks = res.data;
})

// ほとんどのエラーをキャッチ
Vue.config.errorHandler = function (err, vm, info) {
    // 2.2.0 以降で使用可
    alert(err);
}
// 残りのエラーをキャッチ
window.addEventListener("error", event => {
    alert(event.error);
});
window.addEventListener("unhandledrejection", event => {
    alert(event.reason);
});
・・・
</script>
```



<font color="red">**Vue.config.errorHandler**</font>

Vuejs内のエラーを一元的に処理したい場合に有効
例えば、全ての画面でのどんなエラーでも収集したい場合



<font color="red">**addEventListener**</font>
JavaScriptからさまざまなイベント処理を実行することができるメソッド。

例として、こんな感じです。

Webページが読み込まれたかどうか？
マウスによるクリックがされたかどうか？
フォームに何らかの操作が行われたかどうか？
キーボードから入力が行われたかどうか？


<font color="black">**別の処理方法もある**</font>

そして上記のやり方とは別に
下記は古い？処理方法のやり方っぽいです。

```resources/js/components/TaskCreateComponent.vue
.catch(function (error){
    if(error.reponse){
        console.log(error.reponse.data);
        console.log(error.reponse.status);
        console.log(error.reponse.header);
    } else if (error.request) {
        // 要求がなされたが、応答が受信されなかった
        console.log(error.request);
    } else  {
        // トリガーしたリクエストの設定に何かしらのエラーがある
        console.log('Error', error.message);
    }
    console.log(error.config);
});

```


更に余裕があれば　<font color="black">**vue-axios-interceptors**</font>　を使ってみる。
(対象 : Laravel 5.5以上)

[vue-axios-interceptors](https://www.npmjs.com/package/vue-axios-interceptors)



ますはターミナルでインストール。

```
npm install vue-axios-interceptors --save
```

そして下記の2ファイルを修正。

```resources\js\app.js
/* vue-axios-interceptors */
require('vue-axios-interceptors');
window.axios = require('axios');
```

```resources\js\components\TaskListComponent.vue
/* axios.interceptors */
mounted() {
    window.intercepted.$on('response', data => {
        console.log(data); // { status: 404, code: 'Not found', body: null }
    });
    this.getTasks();
}
```
vue-axios-interceptorsを使うことによって
例えばgoogle chrome developer toolsでF12で起動し
Consoleのタブでレスポンスの内容を<font color="red">**赤枠部分**</font>に表示出来ます。


![Laravel - Google Chrome 2021-06-11 13.53.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/5d8141e1-43de-e3bf-ef73-43ff0074e9cc.png)


commit：[Axios エラーハンドリング](https://github.com/silversink8888/vue-laravel-spa/commit/5b5711a072585847597acbedaf91733041146f54)




#最後に

Vue.jsは勉強して日が浅く、
間違い等があるかもしれません。

修正点等ありましたらコメント下さい。


#参考

[【Ajax】axiosを使って簡単にHTTP通信](https://www.willstyle.co.jp/blog/2751/)