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