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

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.
})
}

重定向工作正常。但错误不起作用。仅显示服务器错误页面。

Answer 1

现在它在 @nuxtjs/axios 助手🎉中可用

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

Answer 2

我有同样的问题。

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

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

Answer 3

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

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

Answer 4

您可以使用 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 帮助程序，有关此的更多信息，请参阅扩展 axios