Axios 响应拦截器 - 获取非 2xx http 状态的 API 响应

Question

我有一个自定义的 Axios 实例，它使用拦截器返回响应。 根据 Axios 文档，只要有 2xx 状态，就会调用成功拦截器，如果是 2xx 以外的任何状态，就会调用错误拦截器。 我想在调用错误拦截器时显示一个错误对话框。

问题：我想在对话框中显示来自 API 响应的错误消息。 例如，API 可能会以 401 状态响应，并且仍然具有带有用户友好错误消息的自定义响应。 但是，我不确定如何在错误拦截器 function 本身中获取响应。

const responseErrorInterceptor = async (error: AxiosError): ServiceResult<AxiosError> => {
  if (error.response) {
    store.dispatch(setErrorDialog(undefined, /*display api error response here*/));
    //right now it just displays the unfriendly Axios error content
  }
  return Promise.reject(error);
};

如果有可能实现这一目标，有什么想法吗？

Answer 1

是的，这是有可能实现的。 传递给错误拦截器 function 的 AxiosError object 包含一个响应属性，该属性包含来自 API 的响应数据。您可以使用它来获取用户友好的错误消息并将其显示在对话框中。

例如：

const responseErrorInterceptor = async (error: AxiosError): ServiceResult<AxiosError> => {
  if (error.response) {
    const userFriendlyErrorMessage = error.response.data.errorMessage;
    store.dispatch(setErrorDialog(undefined, userFriendlyErrorMessage));
  }
  return Promise.reject(error);
};