【メモ】Nuxt.js: axiosでオフライン状態(NetworkError)を捕捉する

axiosでAPIにアクセスするとき、エラーレスポンスをハンドリングすることは出来るんだけど、接続エラーなどの、サーバーからレスポンスが何も帰ってこないエラー(ネットワークエラー)は onError にも onResponse にも入ってこない。

// @/plugins/axios.js

export default function({ $axios }) {
  $axios.onRequest(req => {
    // リクエスト前に呼び出されるコード
  })
  $axios.onResponse(res => {
    // 成功レスポンスを受け取った時に呼び出されるコード
    // 接続エラーはここにこない(レスポンス自体ないから)
  })
  $axios.onError(res => {
    // エラーレスポンスを受け取った時に呼び出されるコード
    // 接続エラーはここにこない(レスポンス自体ないから)
  })
}

一日考えた挙句、そうかリクエスト前にチェックすれば良いんだわということに気が付いた(遅)

window.navigator.onLine で、オンライン状態を確認できるので、onRequest にこのチェックを追加。

developer.mozilla.org

// @/plugins/axios.js
import Vue from 'vue'

export default function({ $axios }) {
  $axios.onRequest(req => {
    if (!window.navigator.onLine) {
      Vue.toasted.error( // オフライン時にAPIリクエストがあったときにtoastを表示するようにした
        '現在オフラインです。'
      )
      return Promise.reject(req)
    }
    // リクエスト前に呼び出されるコード
  })
  $axios.onResponse(res => {
    // 成功レスポンスを受け取った時に呼び出されるコード
  })
  $axios.onError(res => {
    // エラーレスポンスを受け取った時に呼び出されるコード
  })
}

無事捕捉することが出来ました。