如何处理多个Axios实例？自定义useAxios Hook相关疑问

先贴出你编写的Hook代码：

export const useAxios = () => {
  
  const { userData } = useUser();

  const customAxios = axios.create({
    headers: { Authorization: `Bearer ${userData?.user?.token}` },
  });
  
  return customAxios;
};

1. 如何判断每次是覆盖已有实例还是创建了多个新实例？ #

你当前的写法，每次组件渲染（包括重渲染）、每个调用useAxios的组件，都会创建全新的Axios实例。因为axios.create()写在Hook的顶层，每次Hook执行都会调用这个方法生成新的实例对象。

验证方法很简单：

• 在创建实例后添加日志：console.log('实例引用', customAxios)，调用Hook的组件渲染时，控制台会输出不同的引用地址，证明每次都是新实例；
• 或者给实例加唯一标识：customAxios._id = Date.now() + Math.random()，打印这个_id就能看到每次生成的值都不一样。

2. 若确实创建了多个实例，是否可行？ #

技术上完全可行，Axios本身支持多个实例并存，每个实例独立管理自己的配置、拦截器和请求状态。但会带来一些不必要的问题：

• 内存冗余：频繁渲染或大量组件调用时，会生成很多实例，虽然JS垃圾回收会清理，但额外的内存开销没必要；
• 维护成本高：如果后续要加拦截器、统一配置，每个实例都要单独处理，容易遗漏或重复代码；
• 配置重复：多个实例的基础配置（比如baseURL）如果相同，会造成代码冗余。

3. 除了useEffect或useCallback，还有哪些常用解决方案？ #

方案一：全局单例实例 + 动态拦截器 #

创建一个全局的Axios单例，通过请求拦截器在发送请求前动态注入token，不用反复创建新实例：

// 全局单例实例
const axiosInstance = axios.create({
  baseURL: '/api' // 固定配置放这里
});

// 请求拦截器动态插入token
axiosInstance.interceptors.request.use(config => {
  // 这里不能直接调用Hook，需要把token存到全局可访问的地方（比如Context、Zustand/Redux状态）
  const token = window.__APP_TOKEN__; // 举例：全局变量存储token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Hook直接返回单例
export const useAxios = () => {
  return axiosInstance;
};

注意：要确保token能被拦截器访问到，比如在用户登录/登出时，同步更新全局的token变量。

方案二：useMemo缓存实例 #

用useMemo依赖token，只有token变化时才重新创建实例，避免组件每次渲染都生成新实例：

export const useAxios = () => {
  const { userData } = useUser();
  const token = userData?.user?.token;

  const customAxios = useMemo(() => {
    return axios.create({
      headers: { Authorization: token ? `Bearer ${token}` : undefined },
    });
  }, [token]); // 仅当token变化时重新创建实例

  return customAxios;
};

这个方案下，同一个组件只会在token变更时生成新实例，多个组件仍会各自持有实例，但比原写法的开销小很多。

方案三：集中式实例管理 #

把Axios实例放到单独模块，通过方法更新token，所有组件共享同一个实例：

// axios.js
const instance = axios.create({
  baseURL: '/api'
});

export const setAuthToken = (token) => {
  if (token) {
    instance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  } else {
    delete instance.defaults.headers.common['Authorization'];
  }
};

export default instance;

// Hook中使用
export const useAxios = () => {
  const { userData } = useUser();
  
  useEffect(() => {
    const token = userData?.user?.token;
    setAuthToken(token);
  }, [userData]);

  return instance;
};

这是最常用的优化方式，所有组件共享同一个实例，token变化时仅更新实例的默认header，完全避免了多实例的问题。

内容的提问来源于stack exchange，提问作者Sina Gol