Question

我当时使用的样板随附了axios插件，但后来决定使用@ nuxt / axios模块，以便于访问和配置。

样板已经带有预配置的插件，我在扩展它时试图将其传递给模块的配置。

它最初带有以下响应拦截器配置：

 axios.interceptors.response.use(
        response => response,
        error => {
          const {
            status
          } = error.response || {}

          if (status >= 500) {
            swal({
              type: 'error',
              title: app.i18n.t('error_alert_title'),
              text: app.i18n.t('error_alert_text'),
              reverseButtons: true,
              confirmButtonText: app.i18n.t('ok'),
              cancelButtonText: app.i18n.t('cancel')
            })
          }

          if (status === 401 && store.getters['auth/check']) {
            swal({
              type: 'warning',
              title: app.i18n.t('token_expired_alert_title'),
              text: app.i18n.t('token_expired_alert_text'),
              reverseButtons: true,
              confirmButtonText: app.i18n.t('ok'),
              cancelButtonText: app.i18n.t('cancel')
            }).then(() => {
              store.commit('auth/LOGOUT')

              redirect({
                name: 'homepage'
              })
            })
          }

          return Promise.reject(error)
        }
      )

我认为为onError添加一个拦截器与捕获错误onResponse的作用相同，但是我不确定它是否是同一件事，但是我做了以下事情：

$axios.onError(error => {
    const code = parseInt(error.response && error.response.status)

    if(code >= 500){
        app.swal({
        type: 'error',
        title: app.i18n.t('error_alert_title'),
        text: app.i18n.t('error_alert_text'),
        reverseButtons: true,
        confirmButtonText: app.i18n.t('ok'),
        cancelButtonText: app.i18n.t('cancel')
        })
    }

    if (code === 401 && store.getters['auth/check']) {
        app.swal({
            type: 'warning',
            title: app.i18n.t('token_expired_alert_title'),
            text: app.i18n.t('token_expired_alert_text'),
            reverseButtons: true,
            confirmButtonText: app.i18n.t('ok'),
            cancelButtonText: app.i18n.t('cancel')
        }).then(() => {
        store.commit('auth/LOGOUT')

        redirect({
            name: 'homepage'
        })
        })
  }
})

我目前正在像这样扩展我的模块：

export default ({$axios,store,app,redirect}) => {
    $axios.onRequest(config => {
      console.log('axios request made')
     const token = store.getters['auth/token']

     if (token) {
      config.headers.common['Authorization'] = `Bearer ${token}`
     }

     const locale = store.getters['lang/locale']
     if (locale) {
      config.headers.common['Accept-Language'] = locale
     }
    })
}

并能够将插件使用的相同配置传递给模块onRequest拦截器，但我无法对onResponse进行相同操作。

我不知道它是否有效，我想知道使用onError是否是正确的方法（是否可以像第一种配置那样返回拒绝），或者如果不能，则如何扩展我的方法模块，以使响应拦截器使用与上述插件相同的配置。

最好的问候

扩展axios nuxt模块以捕获onResponse错误

0 个答案: