Axios源码解析（一）：模块分解

林景宜
569 阅读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.js、core/Axios.js、default.js、adapter/xhr.js、adapter/http.js 和 utils.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 源码解析（七）：项目周边
avatar
文章
阅读
粉丝