ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Axios 升级指南:v0.x 到 v1.19.0 破坏性变更的源码级解读

Axios 升级指南:v0.x 到 v1.19.0 破坏性变更的源码级解读 Axios 升级指南v0.x 到 v1.19.0 破坏性变更的源码级解读【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios本文基于 Axios 官方升级文档docs/es/pages/getting-started/upgrade-guide.md系统梳理从 v0.x 升级到 v1.x、以及升级到当前 v1.19.0 版本时的全部关键破坏性变更导入方式、拦截器类型、请求头结构、multipart 表单、参数序列化与内部 API 收敛。文中每一项变更均结合当前仓库源码lib/ 目录给出实现层面的证据帮助你安全、可验证地完成版本迁移。升级总原则与版本背景官方建议从哪个主版本开始迁移就要逐条阅读经过的每个主版本的发布说明release notes因为它们可能包含本指南未覆盖的破坏性变更信息。可以确认当前仓库的 package.json 中版本号为1.19.0因此“升级到 v1.19.0”一节描述的就是当前源码中的最新行为。仓库根目录另有 MIGRATION_GUIDE.md提供了 0.x 到 1.x 错误处理策略、迁移分阶段流程和常见排障模式等补充材料可与本指南对照阅读。升级到 v1.19.0畸形 HTTP(S) URL 将被直接拒绝v1.19.0 开始请求会拒绝协议后缺少//的http:/https:形式url或baseURL。例如https:example.com、https:/example.com都会被判定为畸形地址请替换为https://example.com这类规范写法。产生的AxiosError使用错误码ERR_INVALID_URL并且错误消息中会安全地标识出出错的 URL同时隐藏其中的敏感信息凭据、查询参数值、fragment 内容。这是一个有意为之的安全变更防止畸形 URL 的规范化过程被利用来绕过baseURL约束或 URL 白名单校验。源码层面的实现证据判定逻辑位于 lib/core/buildFullPath.js#L8-L56正则/^https?:(?!\/\/)/i匹配“协议后不跟随//”的字符串assertValidHttpProtocolURL在buildFullPath入口处分别对requestedURL和baseURL做断言命中即抛出携带AxiosError.ERR_INVALID_URL的错误lib/core/AxiosError.js#L216 定义了该错误码常量。错误消息脱敏由同一文件中的redactSensitiveURLParts完成lib/core/buildFullPath.js#L10-L43把 userinfouser:pass、查询参数值、fragment 内容替换为REDACTED标记同时保留 scheme、host、path 和参数名使出错请求仍可准确定位。之所以在错误消息里做脱敏是因为AxiosError的message会被原样记录进日志而基于config.redact的脱敏模型无法覆盖到消息文本。buildFullPath是完整 URL 拼装的唯一入口lib/core/Axios.js 在getUri中调用它请求分发路径同样经由它组合baseURL与url因此该断言对两种 URL 来源都生效。同步请求拦截器抛出错误的新行为当同步请求拦截器synchronous request interceptor抛出错误时Axios 的处理规则为立即调用该拦截器配对的拒绝处理器rejection handler并停止执行剩余请求拦截器如果拒绝处理器正常返回没有抛出、也没有返回被拒绝的 Promise错误即被视为“已处理”Axios 会用最后一个合法配置继续发送请求——注意拒绝处理器的返回值不会成为新的请求配置如果你的校验逻辑必须阻止请求发送请不注册拒绝处理器或者在拒绝处理器中抛出异常 / 返回一个被拒绝的 Promise终止性错误terminal errors会继续流向响应拒绝拦截器response rejection interceptors。该行为可以直接在同步拦截器链的实现中得到印证见 lib/core/Axios.js#L211-L240try { newConfig onFulfilled ? onFulfilled(newConfig) : newConfig; } catch (error) { if (!onRejected) { promise Promise.reject(error); // 无拒绝处理器直接失败 break; } try { const rejectedResult onRejected.call(this, error); if (utils.isThenable(rejectedResult)) { promise Promise.resolve(rejectedResult).then(() dispatchRequest.call(this, newConfig) // 注意用的是 newConfig最后一个合法配置 ); } } catch (rejectedError) { promise Promise.reject(rejectedError); } break; // 停止剩余请求拦截器 }可以看到拒绝处理器正常返回时后续dispatchRequest接收的是循环中尚未被覆盖的newConfig即“最后一个有效配置”其返回值并未参与配置替换随后break保证剩余请求拦截器不再执行。从 v0.x 升级到 v1.x导入声明改为 default 导出v1.x 中 Axios 的入口模块改为仅保留 default 导出你需要把具名导入import { axios } from axios改为默认导入- import { axios } from axios; import axios from axios;源码证据lib/axios.js#L86-L89axios.default axios;之后export default axios;注释明确写着 “this module should only have a default export”。包入口 index.js 负责“解包”它import axios from ./lib/axios.js后再把这个默认实例上的静态属性create、Axios、AxiosError、CanceledError、isCancel、CancelToken、VERSION、all、Cancel、isAxiosError、spread、toFormData、AxiosHeaders、HttpStatusCode、formToJSON、getAdapter、mergeConfig重新以具名方式导出从而在 ESM 与 CJS 下保持一致的顶层导出面。也就是说公共 API 依然存在但获取核心实例必须走 default 导出。拦截器系统请求拦截器参数类型变化在 v1.x 中请求拦截器的config参数类型从公开的AxiosRequestConfig变为InternalAxiosRequestConfig该类型定义在 index.d.ts 中你需要按新类型标注参数- axios.interceptors.request.use((config: AxiosRequestConfig) { axios.interceptors.request.use((config: InternalAxiosRequestConfig) { return config; });原因是拦截器拿到的已经是完成 headers 扁平化、method 解析等内部加工后的“内部配置”对象与对外承诺的公开AxiosRequestConfig形状并不相同例如其中 headers 已是AxiosHeaders实例。这一区别也体现在 lib/core/Axios.js 的请求管线中拦截器链在mergeConfig与 headers 归一化第 92 行、第 164 行之后才执行。请求头结构移除 common 属性v1.x 移除了请求头中的common层级属性代码需要相应更新- if (request.headers?.common?.Authorization) { - request.headers.common.Authorization ... if (request.headers?.Authorization) { request.headers.Authorization ...原先放在common、get、post等键下的默认头现在直接定义在axios.defaults.headers上- axios.defaults.headers.common[Accept] application/json; axios.defaults.headers[Accept] application/json;从源码结构看这个“移除”是发生在请求构造阶段的lib/core/Axios.js#L153-L164 中headers.common与headers[config.method]先被合并为contextHeaders随后遍历[delete, get, head, post, put, patch, query, common]删除这些方法级键最后经AxiosHeaders.concat生成扁平化的config.headers。因此拦截器与后续管线里看到的请求头已经是无common层级的扁平结构。multipart 表单数据自动处理当请求携带FormData负载时Content-Type: multipart/form-data含 boundary现在会自动设置请删除任何手动设置的该请求头避免产生重复头- axios.post(/upload, formData, { - headers: { Content-Type: multipart/form-data }, - }); axios.post(/upload, formData);实现上FormData 的边界头由其实现自身生成再经由 lib/core/setFormDataHeaders.js 合并进请求头默认策略合并全部 FormData 头策略为content-only时仅复制content-type/content-length见该文件 第 16-27 行。此外如果你显式设置Content-Type: application/jsonAxios 现在会自动将请求数据序列化为 JSON无需再手写JSON.stringify。参数序列化params的破坏性变更v1.x 对 URL 参数序列化引入了多处破坏性变更最重要的是1.params默认采用百分号编码percent-encoded。如果你的后端期望 qs 风格的裸方括号编码需要配置自定义序列化器import qs from qs; axios.create({ paramsSerializer: { serialize: (params) qs.stringify(params, { arrayFormat: brackets }), }, });2.params中的嵌套对象默认使用方括号记法foo[bar]1而不再是点记法foo.bar1。若后端期望点记法请使用自定义序列化器。3.null与undefined的处理变得一致null值被序列化为空字符串undefined值则被完全忽略、不出现在查询串中。源码证据序列化入口在 lib/helpers/buildURL.js#L31-L57若传入paramsSerializer.serialize函数则完全交给自定义逻辑否则走内置的 lib/helpers/AxiosURLSearchParams.js其toString默认对每个键值做百分号编码encodeURIComponent为基础并对!、、(、)、~、空格做了 RFC 友好的替换见 第 13-25 行。方括号记法与null/undefined的语义实现在 lib/helpers/toFormData.jsAxiosURLSearchParams通过toFormData(params, this, options)遍历参数树数组元素键默认渲染为key[]第 213-224 行convertValue中null转为空字符串第 121-122 行而undefined/null的顶层与数组项在遍历时被直接跳过第 216 行、第 259 行。toFormData同时暴露了dots选项这是恢复“点记法”行为的底层开关默认false即方括号。完整的paramsSerializer配置选项说明可参阅 请求配置 文档页。内部实现不再导出v1.x 起Axios 决定不再导出内部实现代码应只使用公共 API。这一收敛的动机是简化 API、缩小暴露面使得后续版本可以修改内部实现而无需将其声明为破坏性变更。这一点可以从包入口的导出清单直接验证index.js#L26-L45 只导出axiosdefault、create、Axios、AxiosError、CanceledError、isCancel、CancelToken、VERSION、all、Cancel、isAxiosError、spread、toFormData、AxiosHeaders、HttpStatusCode、formToJSON、getAdapter、mergeConfig等公共成员v0.x 时代可被require(axios/lib/...)或具名访问的dispatchRequest、buildURL、mergeConfig之外的内部模块等均不在公开面中。如果你此前依赖了内部模块请在 API 参考 中确认对应公共替代方案。请求配置对象的其他变化v1.x 还对请求配置对象request config做了调整新增与移除的配置项、默认值变化等完整、最新的配置说明请以 请求配置 参考页为准。本指南未覆盖的破坏性变更官方声明本指南不是穷尽的可能未覆盖所有破坏性变更。如果你在升级中遇到指南未提及的问题请在 Axios 官方文档仓库中提交 issue并打上breaking change标签便于维护者补全。迁移检查清单结合上述各节一次 v0.x → v1.x含 v1.19.0升级可按以下清单落地导入语句全局替换import { axios }为import axios from axios拦截器请求拦截器参数类型改为InternalAxiosRequestConfig同步拦截器若依赖“拒绝处理器返回值作为新配置”的旧预期按 lib/core/Axios.js#L211-L240 的新语义调整请求头删除所有headers.common访问路径默认头改写到axios.defaults.headers表单上传移除手动的multipart/form-data头依赖自动设置查询参数核对后端的 URL 编码期望裸方括号 vs 百分号编码、点记法 vs 方括号记法必要时通过paramsSerializer.serialize注入qs等自定义序列化器URL 合法性将https:example.com之类畸形地址修正为https://example.com避免触发ERR_INVALID_URL内部依赖排查并替换对axios/lib/*内部模块的引用仅使用 index.js 导出的公共 API。【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表