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

2019年3月20日水曜日

javascript Nuxt

t f B! P L

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

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

Nuxt.jsで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のイベント

イベント 説明
onRequest axiosのリクエストが発生した時に発生するイベント
onResponse 通信相手からのレスポンスを受信した時に発生するイベント
onRequestError リクエスト時エラーが発生した時のイベント
onResponseError レンポンスがエラーの時に発生するイベント
onError エラーが発生した時に発生するイベント
スポンサーリンク

QooQ