上篇 Axios 源码解析(零):文档翻译 翻译了 Axios
的文档,下面来将 Axios
整个目录的结构进行拆解。在github.com/MageeLin/ax… 中的analysis
分支可以看到当前已解析完的文件。
目录结构
将整个工程摊开,整个的结构与功能如下所示:
│ .eslintrc.js // eslint配置文件
│ .gitignore // git忽略配置文件
│ .npmignore // npm忽略配置文件
│ .travis.yml // travis自动化配置文件
│ bower.json // bower配置文件
│ CHANGELOG.md // 修改日志
│ CODE_OF_CONDUCT.md // 贡献者行为准则
│ COLLABORATOR_GUIDE.md // 贡献指南
│ CONTRIBUTING.md // 贡献
│ COOKBOOK.md // 使用指南
│ ECOSYSTEM.md // 生态
│ Gruntfile.js // grunt配置文件
│ index.d.ts // typescript声明文件
│ index.js // 引用入口文件
│ karma.conf.js // 自动化测试karma配置文件
│ LICENSE // 许可
│ package.json // npm配置文件
│ README.md // 使用文档
│ UPGRADE_GUIDE.md // 升级指南
│ webpack.config.js // webpack配置文件
│
├─.github // github的配置
│
├─dist // 打包输出目录
│
├─examples // 实例目录
│
├─lib // 源文件目录
│ │ axios.js
│ │ defaults.js
│ │ utils.js
│ │
│ ├─adapters // 适配器 `adapters/` 下的模块负责发送请求并在收到响应后处理返回的 `Promise` 。
│ │ http.js
│ │ README.md
│ │ xhr.js
│ │
│ ├─cancel // 取消请求
│ │ Cancel.js
│ │ CancelToken.js
│ │ isCancel.js
│ │
│ ├─core // 核心 axios 内部专用模块
│ │ Axios.js
│ │ buildFullPath.js
│ │ createError.js
│ │ dispatchRequest.js
│ │ enhanceError.js
│ │ InterceptorManager.js
│ │ mergeConfig.js
│ │ README.md
│ │ settle.js
│ │ transformData.js
│ │
│ └─helpers // 通用模块 `helpers/` 中的模块是通用模块,*不*特定于 axios 的内部专门情况
│ bind.js
│ buildURL.js
│ combineURLs.js
│ cookies.js
│ deprecatedMethod.js
│ isAbsoluteURL.js
│ isAxiosError.js
│ isURLSameOrigin.js
│ normalizeHeaderName.js
│ parseHeaders.js
│ README.md
│ spread.js
│ validator.js
│
├─sandbox // 沙箱
│ client.html
│ client.js
│ server.js
│
└─test // 测试
可以看到所有的源文件都在 /lib
目录下,包含 3
个文件:axios.js
(整个项目的入口)、default.js
(给请求添加缺省配置项)、utils.js
(工具方法),同时包含 4
个目录:/adapters
(适配器,负责发送请求并在收到响应后返回 Promise
)、/cancel
(取消请求)、/core
(内部的核心模块)、/helpers
(通用模块,不特定于 axios 的内部专门情况)。
注意:
/core
和/helpers
其实功能类似,但是/helpers
下的方法是通用方法,也就是说不限定于Axios
内部专用,没有与Axios
进行耦合。
依赖关系
对 /lib
目录进行下文件依赖分析,结果如下所示:
可以看出文件的依赖关系比较混乱,但是从左到右明显可以发现几个核心节点:axios.js
、core/Axios.js
、default.js
、adapter/xhr.js
、adapter/http.js
和 utils.js
。这几个文件依赖的文件比较多,说明其他文件都是为这几个文件服务的,也就是核心所在。
模块分解
配合目录和依赖,可以将源码分五部分来解析:
- 通用工具方法:各种依赖性较低的通用工具方法,包括
utils.js
和/helpers
目录 - 适配器:负责在
浏览器
和Nodejs
环境中发出请求的/adapters
- 核心工具方法 1:与
axios
项目耦合度较高的工具方法,包括default.js
和/cancel
目录 - 核心工具方法 2:与
axios
项目耦合度较高的工具方法,包括/core
目录 - 入口文件:
axios.js
在系列的最后,同时把 Axios
项目的周边 MD
文件都翻译了下,帮助大家也能多多为社区做贡献。所以本系列文章的整体分以下8
个部分:
- Axios 源码解析(零):文档翻译
- Axios 源码解析(一):模块分解
- Axios 源码解析(二):通用工具方法
- Axios 源码解析(三):适配器
- Axios 源码解析(四):核心工具方法(1)
- Axios 源码解析(五):核心工具方法(2)
- Axios 源码解析(六):入口文件
- Axios 源码解析(七):项目周边