为何React Native多组件会共享同一axios实例？

场景示例 #

创建axios实例文件 /lib/axiosPrivate.js #

import axios from 'axios';

const axiosPrivate = axios.create({
    baseURL: 'https://xxx.xxx.com.br',
});

export default axiosPrivate;

三个使用该实例的React Native组件 #

ClientList.js

import axiosPrivate from '../lib/axiosPrivate';

export default props => {

    const fetchClient = async () => {
            const { data } = await axiosPrivate.get('clients');
        ...
    }
...
}

ProductList.js

import axiosPrivate from '../lib/axiosPrivate';

export default props => {

    const fetchProduct = async () => {
            const { data } = await axiosPrivate.get('products');
        ...
    }
...
}

SaleList.js

import axiosPrivate from '../lib/axiosPrivate';

export default props => {

    const fetchSale = async () => {
            const { data } = await axiosPrivate.get('sales');
        ...
    }
...
}

通过这种方式，3个组件共享同一个axiosPrivate实例。
我想请教：为什么会出现这种情况？
每次在组件中导入axiosPrivate时，“axios.create”命令难道不应该创建一个新的实例吗？

原因解释 #

这是Node.js（包括React Native采用的JS模块系统）的模块缓存机制导致的：

• 当你第一次导入/lib/axiosPrivate.js时，模块系统会执行文件内的所有代码，调用axios.create生成实例，然后将这个实例缓存起来。
• 后续其他文件再导入该模块时，模块系统不会重新执行文件代码，直接返回之前缓存好的实例。

也就是说axios.create只会在模块首次加载时执行一次，不是每次导入都触发，所以所有组件拿到的都是同一个实例。

如果想要每次导入都生成新实例，可以把创建逻辑改成函数：

// /lib/axiosPrivate.js
import axios from 'axios';

export default () => axios.create({
    baseURL: 'https://xxx.xxx.com.br',
});

然后在组件里调用函数获取新实例：

// ClientList.js
import createAxiosPrivate from '../lib/axiosPrivate';

const axiosPrivate = createAxiosPrivate();

这样每个组件调用函数时都会生成独立的axios实例。

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