Question

我正在使用Nuxt和axios-module。

我试图通过axios全局拦截器进行全局错误处理。

如何在Nuxt插件中使用错误功能？

// ~/plugins/axios.js

export default function ({ $axios, store, redirect, error }) {
 $axios
 .onError(apiError => {
   error({statusCode: '403', message: 'test'}) // It's not work.
   redirect('http://google.com') // It's work.
  })
}

重定向有效。但错误不起作用。只需显示server error page。

Answer 1

现在可以在 @nuxtjs/axios Helper ?

export default function ({ $axios, error: nuxtError }) {
  $axios.onError(error => {
    nuxtError({
      statusCode: error.response.status,
      message: error.message,
    });
    return Promise.resolve(false);
  })
}

Answer 2

您的插件函数应该返回一个Promise，并在调用error函数之后立即解决，因为Nuxt.js将插件函数视为Promise。就是这样。

export default function ({ $axios, error }) {
  return new Promise(resolve => {
    $axios.onError(apiError => {
      error({ statusCode: 403, message: 'test' }))
      resolve()
    }
  })
}

Answer 3

您可以将 Axios 帮助程序用于帮助处理拦截的 Nuxt 错误。

export default function ({ $axios, store, redirect, error: nuxtError }) {
  $axios.onError(error => {
    nuxtError({
      statusCode: error.response.status,
      message: error.message,
      if(statusCode === 403){
        redirect('http://example.com')
      }
    });
    return Promise.resolve(false);
  })
}

有关详细信息，请参阅 @nuxt/axios helpers，有关详细信息，请参阅 extending axios

Answer 4

我有同样的问题。

检查我的代码后，我发现当您在asyncData方法中仅请求数据一次时，插件中的错误方法就可以了。但是，如果您多次请求，则错误方法可能不起作用。此方法无法停止使用asyncData方法返回数据。

因此，我的解决方案是在您构建的axios插件中检查响应，并在通过promise.all（）请求多个api时也检查响应。如果不合格，请停止返回数据。

如何在Nuxt插件中使用错误功能？

4 个答案: