如何在axios拦截器中调用自定义React错误组件

Question

我想显示/调用一个自定义的react错误组件。下面是我的代码片段。我遇到了错误，因为我的axios拦截器既不是react组件，也不是自定义Hook。

axios.interceptors.response.use((response) => {
if (response.config.parse) {
//perform the manipulation here and change the response object
}
return response;
}, (error) => {
//Want to call the component here
return Promise.reject(error.message);
});

Answer 1

我认为您无法在axios拦截器中呈现组件。

拦截器将拦截您做出的每一个响应，如果出现错误，请处理该错误。

这意味着React无法知道基于axios的任何响应的错误在DOM的哪个部分中渲染什么。以下是拦截器如何工作的一个很好的解释，以及它们的良好用例

如果您想向用户呈现一条错误消息，那么不要拦截响应。只需等待响应出现错误(在正常请求而非拦截器中(，然后将该错误传递给您自己的错误组件。

在实践中，这可能看起来像下面的

function apiQuery (url) {
const [error, setError] = useState(null);
const [api, setApi] = useState(null);
axios.get(url)
.then(function (response) {
// handle success
setApi(response.data)
})
.catch(function (error) {
// handle error
setError(error)
})
return { api, error }
}

现在您可以访问错误响应，可以将其传递到您自己的错误组件中

const api = apiQuery('/users')
// pass error into your bespoke component
if (api.error) return <Error error={error}/>