Axios 拦截器不会立即使用 `useNavigation` 导航到错误页面

Question

我在我的

axios

项目中使用

React

。在拦截器中，当我发现服务器错误时，我使用

useNavigate

导航到错误页面。我的代码看起来像这样。

export const AxiosInstanceProvider: FC<AxiosInstanceProviderProps> = ({
  children,
}) => {
  const navigate = useNavigate();
  useLayoutEffect(() => {
    const responseInterceptorId = instance.interceptors.response.use(
    (response) => {
      return response;
    },
    (error: AxiosError) => {
      const status = error.response?.status;
      if (!status || isServerError(status)) {
        navigate("/error", {
          state: {
            error,
          },
        });
      }
      return Promise.reject(error);
    }
  );

    return function cleanup() {
      instance.interceptors.response.eject(responseInterceptorId);
    };
  }, [navigate]);

  return <>{children}</>;
};

问题是它导航到页面，但仍然转到

catch

块，例如，显示小吃栏，并且此小吃栏开始出现在错误页面上，或者在我在组件中定义的屏幕上抛出错误，因此它不会立即导航。

Answer 1

为了确保导航后的代码不执行，您可以在导航后返回一个被拒绝的 Promise。

const navigate = useNavigate();
  useLayoutEffect(() => {
    const responseInterceptorId = instance.interceptors.response.use(
      (response) => {
        return response;
      },
      (error: AxiosError) => {
        const status = error.response?.status;
        if (!status || isServerError(status)) {
          navigate("/error", {
            state: {
              error,
            },
          });

          // Return a rejected promise to prevent further execution
          return Promise.reject(error);
        }

        return Promise.reject(error);
      }
    );