Nuxt.jsでaxiosのリクエストをフックする

axiosのリクエストを、１箇所で監視する方法です。
通信ログの記録や、エラー発生時にカスタムエラー画面に飛ばすといった事ができます。

スポンサーリンク

サンプルプログラム

plugins/axios.js

export default function ({ $axios, redirect }) {
  $axios.onRequest(config => {
    console.log('axiosリクエスト発生 url=' + config.url)
  })

  $axios.onError(error => {
    //axiosの通信でエラーが発生した時に 400エラーページにリダイレクト
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

nuxt.config.js への設定も忘れずに

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

スポンサーリンク

axiosのイベント