Axios 实例创建完全指南深入 axios.create() 的预配置与隔离机制【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios本文基于官方文档 Creating an instance 展开系统讲解 Axios 中axios.create()实例机制如何为不同服务创建预配置实例、实例与默认对象的关系、按请求覆盖默认值的优先级规则并结合仓库源码揭示createInstance的工厂实现、配置合并mergeConfig与拦截器隔离的底层原理帮助你在多 API 应用中建立清晰可维护的请求分层。axios.create() 是什么axios.create()用于创建一个预配置好的 axios 实例。该实例与默认的axios对象共享同一套请求/响应 API但会把你在创建时传入的配置作为该实例每一次请求的基线baseline。官方文档明确建议对于任何超出单文件规模的应用都推荐使用实例方式使用 axios。基本用法如下import axios from axios; const instance axios.create({ baseURL: https://api.example.com, timeout: 5000, headers: { X-Custom-Header: foobar }, });create方法接受完整的请求配置Request Config对象。创建之后你可以像使用默认axios对象一样使用该实例const response await instance.get(/users/1);源码视角createInstance 工厂函数在 lib/axios.js 中实例并非由class直接 new 出来的“裸对象”而是由createInstance工厂函数组装而成function createInstance(defaultConfig) { const context new Axios(defaultConfig); const instance bind(Axios.prototype.request, context); // Copy axios.prototype to instance utils.extend(instance, Axios.prototype, context, { allOwnKeys: true }); // Copy context to instance utils.extend(instance, context, null, { allOwnKeys: true }); // Factory for creating new instances instance.create function create(instanceConfig) { return createInstance(mergeConfig(defaultConfig, instanceConfig)); }; return instance; }这段代码揭示了三个关键事实实例本身就是一个被绑定的request函数。instance(url, config)这种“类 fetch”的直接调用方式之所以可行是因为instance直接就是Axios.prototype.request绑定到context后的函数引用API 的完整继承来自两次utils.extend。先把Axios.prototype上的所有方法get、post、delete、put、patch、query、getUri等复制到实例上再把context即Axios实例本体复制到实例上——这就是文档所说“实例与默认对象共享同一 API”的实现来源。浏览器端测试 tests/browser/instance.browser.test.js 中的should have the same methods as default instance用例正是逐属性断言了实例与默认对象的方法类型一致性实例可以递归创建。instance.create(instanceConfig)会用mergeConfig(defaultConfig, instanceConfig)把父实例的默认配置与新配置合并后再调用createInstance。这意味着你可以在一个基础实例上派生出配置更细化的子实例且父实例的默认值会被自动继承——这是构建“配置树”式 API 客户端的底层能力。再看 lib/core/Axios.js 中的Axios类构造函数class Axios { constructor(instanceConfig) { this.defaults instanceConfig || {}; this.interceptors { request: new InterceptorManager(), response: new InterceptorManager(), }; } }这里有两个要点传入的配置或空对象被原样保存在this.defaults上——这就是后文“运行时修改instance.defaults”能生效的存储位置同时每个Axios上下文都持有独立的request/response两个InterceptorManager——这是“拦截器隔离”这一特性的直接来源。另外值得注意的是 lib/axios.js 中的一行const axios createInstance(defaults);——导出的默认axios对象本身也是通过同一个工厂创建的只不过它的基线配置来自 lib/defaults/index.js 中的全局defaults例如timeout: 0表示默认不超时、validateStatus默认只将 200299 视为成功、headers.common中默认Accept: application/json, text/plain, */*等。因此“实例”与“默认对象”在架构上是同构的区别仅在于defaults的内容。为什么要用实例四个典型场景场景一按服务划分 base URL大多数应用会与不止一个 API 交互。为每个服务创建独立实例可以避免在每次调用中重复书写基础 URLconst githubApi axios.create({ baseURL: https://api.github.com }); const internalApi axios.create({ baseURL: https://api.internal.example.com }); const { data: repos } await githubApi.get(/users/axios/repos); const { data: users } await internalApi.get(/users);场景二共享的认证请求头把认证 token 挂到某个实例上即可让该实例的每个请求自动携带 token且不会影响其他实例const authApi axios.create({ baseURL: https://api.example.com, headers: { Authorization: Bearer ${getToken()}, }, });场景三按服务区分超时与重试策略不同服务的可靠性特征不同。为实时服务设置较紧的超时为批处理任务设置较宽松的超时const realtimeApi axios.create({ baseURL: https://realtime.example.com, timeout: 2000 }); const batchApi axios.create({ baseURL: https://batch.example.com, timeout: 60000 });这里有一个容易踩坑的细节全局默认的timeout是0lib/defaults/index.js 中注释说明 “If set to 0 (default) a timeout is not created”即不设置超时。如果你在某个实例上显式设置timeout: 0效果等同于取消该实例的超时保护——因此“实时服务 2 秒 / 批处理 60 秒”这类按服务差异化的配置比在每个调用点零散传递更可控。测试用例 tests/browser/instance.browser.test.js 中的should use instance options验证了axios.create({ timeout: 1000 })确实会把超时值作用到实际发出的请求上。场景四隔离的拦截器添加到某个实例上的拦截器只对该实例生效从而保持各模块职责分离const loggingApi axios.create({ baseURL: https://api.example.com }); loggingApi.interceptors.request.use((config) { console.log(→ ${config.method?.toUpperCase()} ${config.url}); return config; });从源码看这种隔离是如何保证的Axios构造函数为每个上下文创建了各自独立的InterceptorManager见上文 lib/core/Axios.js而_request中组装拦截器链时只遍历this.interceptors.request/this.interceptors.responselib/core/Axios.js——this指向哪个实例就只收集哪个实例注册过的拦截器。InterceptorManagerlib/core/InterceptorManager.js内部维护自己的handlers数组与内部状态use返回递增 id、eject(id)按 id 移除、clear()清空全部因此即使两个实例都在做日志、鉴权等事情它们的拦截器栈也互不干扰。use还支持synchronous与runWhen选项lib/core/InterceptorManager.js其中runWhen(config) false时该拦截器会被本次请求跳过lib/core/Axios.js适合给实例级拦截器做条件开关。按请求覆盖实例默认值在请求发生时刻传入的配置其优先级始终高于实例默认值。这一规则直接体现在 lib/core/Axios.js 的_request方法中_request(configOrUrl, config) { // Allow for axios(example/url[, config]) a la fetch API if (typeof configOrUrl string) { config config || {}; config.url configOrUrl; } else { config configOrUrl || {}; } config mergeConfig(this.defaults, config); // ... }mergeConfig(this.defaults, config)以实例默认值为底层、以请求级配置为上层执行合并请求侧的显式取值会覆盖实例侧的同名值。对应文档中的示例const api axios.create({ timeout: 5000 }); // This specific request uses a 30-second timeout instead await api.get(/slow-endpoint, { timeout: 30000 });方法别名get、post、put、patch、delete、head、options、query及postForm等*Form简写在生成时也会先做一次mergeConfiglib/core/Axios.js把method、url、data与调用方传入的配置合并后统一交给request最终仍汇入上面这条合并链路。相关合并行为的单元测试见 tests/unit/core/mergeConfig.test.js其中验证了以全局defaults为底层合并时返回值是新对象且headers是独立副本merged.headers).not.toBe(defaults.headers)——也就是说合并不会原地修改实例默认值请求级的修改不会“污染”实例。另外两点与 URL 解析相关的行为也来自请求级配置优先原则实例配置里的url不会覆盖调用时传入的 url测试 tests/browser/instance.browser.test.js 验证了这一点而baseURL与请求 url 的最终拼接发生在 buildFullPath经由dispatchRequest调用getUri(config)方法lib/core/Axios.js也执行同样的mergeConfig(this.defaults, config)后再调用buildFullPathbuildURL可用于在不发请求的情况下预计算最终 URL例如调试 query 序列化。创建之后修改 instance.defaults文档的 tip 指出实例默认值也可以在创建后修改只需直接写instance.defaultsinstance.defaults.headers.common[Authorization] Bearer ${newToken};这之所以可行是因为defaults就是构造函数中保存的那个普通对象this.defaults instanceConfig || {}而每次请求的_request都会实时读取this.defaults参与mergeConfig而不是在创建时做一次性快照。典型的适用场景是 token 刷新拿到newToken后更新headers.common后续所有走该实例的请求都会自动携带新 token无需重建实例。结合 lib/defaults/index.js 的默认请求头结构你可以了解到instance.defaults.headers的组织方式除common对所有方法生效外还包含delete、get、head、post、put、patch、query各自的命名空间用于按 HTTP 方法细分请求头。在请求管线中这些方法专属的键会在合并后被扁平化并清理lib/core/Axios.js 将headers.common与headers[method]合并后删除方法键最终交由AxiosHeaders.concat生成规范化请求头。小结axios.create(config)返回一个由createInstance工厂组装的实例被绑定的request函数 完整的方法集合 独立的defaults与interceptorslib/axios.js、lib/core/Axios.js官方推荐场景按服务划分baseURL、共享认证头、按服务差异化timeout、拦截器隔离优先级规则请求级配置 实例默认值合并逻辑在_request中由mergeConfig统一执行instance.create()支持基于父实例配置派生子实例自动mergeConfig继承instance.defaults是实时生效的引用可在 token 刷新等场景下原地更新。如果想进一步掌握实例可传入的完整配置项参见请求配置文档拦截器的详细机制synchronous、runWhen、移除与清理参见拦截器文档默认配置的完整清单见 lib/defaults/index.js。【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考