React在Axios中使用Hooks(TypeScript)

众所周知，除了 React 组件或自定义钩子，不能在其他地方使用 React 钩子。

本文将介绍基于 TypeScript 在 Axios 拦截器中使用钩子函数的方法。

步骤

1. 准备一个 React 工程，并安装 axios。
2. 在 src/utils 目录下创建一个 request.tsx 文件，用于封装 axios 请求。文件路径、名称可以自行修改。
3. 将下面的内容添加到 request.tsx 文件中。
4. 在合适的位置添加 AxiosInterceptor 组件，包裹应用。

request.tsx

import axios from "axios";
import { useEffect, useState, ReactNode } from "react";
import { useNavigate } from "react-router-dom";

interface AxiosInterceptorProps {
  children: ReactNode;
}

axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
const service = axios.create({
  timeout: 10000,
});

const AxiosInterceptor = ({ children }: AxiosInterceptorProps) => {
  const navigate = useNavigate();
  const [isSet, setIsSet] = useState(false);
  useEffect(() => {
    const resInterceptor = (response: any) => {
      // 此处也可以进行对response的处理，例如判断token是否过期
      // if (response.status === 401) {
      //   navigate("/login");
      // } else {
      //   return response.data;
      // }
      return response.data;
    };

    const errInterceptor = (error: any) => {
      // 此处可以进行错误处理，例如弹出Message
      // const toaster = useToaster();
      // toaster.push(<Message>ERROR: {error}</Message>);
      // OR: alert(error);
      return Promise.reject(error);
    };

    const interceptor = service.interceptors.response.use(
      resInterceptor,
      errInterceptor
    );

    setIsSet(true);
    return () => service.interceptors.response.eject(interceptor);
  }, [navigate]);

  return isSet && children;
};

export default service;
export { AxiosInterceptor };

App.tsx

import { AxiosInterceptor } from "./utils/request";
import ThemeProvider from "./theme-context";
import AuthProvider from "./auth-context";

const App: React.FC = () => {
  return (
    <ThemeProvider>
      <AuthProvider>
        <AxiosInterceptor>
          <div>YOUR_APP_CONTENT</div>
        </AxiosInterceptor>
      </AuthProvider>
    </ThemeProvider>
  );
};

export default App;

References

• https://dev.to/arianhamdi/react-hooks-in-axios-interceptors-3e1h