导入已导出的Axios实例模块时，每次会创建新实例还是为单例？

嘿，这个问题问得很到位！答案是：你导出的这个Axios实例是单例模式的，不会每次导入都创建新实例。

原因其实和ES模块的加载机制有关： #

• ES模块采用的是「静态分析+缓存」的加载逻辑。当你的http.js模块第一次被任何文件import时，模块内的代码会被完整执行一次，此时axios.create()会生成一个实例并赋值给axiosInstance，随后这个实例会被浏览器/Node.js的模块系统缓存起来。
• 之后不管在多少个不同的文件里重复import http from './http'，模块系统都会直接返回缓存好的那个实例，不会再重新执行模块里的代码，自然也不会创建新的Axios实例了。

结合你的代码验证一下： #

看你写的模块代码：

// src/utils/http.js
import axios from 'axios';
const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
});
export default axiosInstance;

你可以在模块里加一行日志测试：

// src/utils/http.js
import axios from 'axios';
const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
});
console.log('Axios实例已初始化'); // 加这行日志
export default axiosInstance;

不管你在项目里的10个还是20个文件里导入这个模块，控制台只会打印一次「Axios实例已初始化」，这就实锤了是单例。

补充个小提示： #

如果哪天你真的需要每次导入都生成新实例，那可以把创建实例的逻辑包装成一个函数导出，比如：

// src/utils/http.js
import axios from 'axios';
export default function createAxiosInstance() {
  return axios.create({
    baseURL: process.env.VUE_APP_API_BASE_URL,
  });
}

这样每次调用createAxiosInstance()都会得到新的实例，但大多数场景下，单例的Axios实例才是我们想要的（比如统一配置拦截器、请求头这些）。

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