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

2021年11月23日火曜日

javascript Nuxt

t f B! P L

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 エラーが発生した時に発生するイベント
スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ