【Nuxt.js】axios-moduleでエラーハンドリングを共通化する

概要

axios-module(@nuxtjs/axios)を使用。

axiosで非同期通信後のエラーハンドリングを共通化したかった。
ここではInterceptorsというものを使っていきます。

手順

1.pluginsディレクトリにエラーハンドリング用のファイルを作成

今回はわかりやすくaxios.jsとしますが、特になんでも大丈夫です。

axios.js

export default function ({ store, $axios, redirect }) {
  $axios.onError((error) => {
    // ここに処理を書いていく
    if (error.response.status === 400) {
      alert('Bad Responseです。');
    }
  });
}

2.nuxt.config.jsに追加したプラグインを設定する

pluginsに以下の通り、追加します。
ここに追加することでレスポンスが400で返ってくるとアラート画面が表示されるようになります。

nuxt.config.js

plugins: ['~/plugins/axios.js'],

参考