Axios源码解析(一):模块分解

456 阅读3分钟

上篇 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.png

可以看出文件的依赖关系比较混乱,但是从左到右明显可以发现几个核心节点:axios.jscore/Axios.jsdefault.jsadapter/xhr.jsadapter/http.jsutils.js。这几个文件依赖的文件比较多,说明其他文件都是为这几个文件服务的,也就是核心所在。

模块分解

配合目录和依赖,可以将源码分五部分来解析:

  1. 通用工具方法:各种依赖性较低的通用工具方法,包括 utils.js/helpers 目录
  2. 适配器:负责在浏览器Nodejs 环境中发出请求的/adapters
  3. 核心工具方法 1:与 axios 项目耦合度较高的工具方法,包括 default.js/cancel 目录
  4. 核心工具方法 2:与 axios 项目耦合度较高的工具方法,包括 /core 目录
  5. 入口文件:axios.js

在系列的最后,同时把 Axios 项目的周边 MD 文件都翻译了下,帮助大家也能多多为社区做贡献。所以本系列文章的整体分以下8个部分:

  1. Axios 源码解析(零):文档翻译
  2. Axios 源码解析(一):模块分解
  3. Axios 源码解析(二):通用工具方法
  4. Axios 源码解析(三):适配器
  5. Axios 源码解析(四):核心工具方法(1)
  6. Axios 源码解析(五):核心工具方法(2)
  7. Axios 源码解析(六):入口文件
  8. Axios 源码解析(七):项目周边