前言

本系列主要从开发中会经常用到的框架或者库的角度去阅读源码，我相信在你阅读源码过后就会知道为什么要阅读源码了。一般读源码都是需要结合官网api进行阅读，这样做是为了让你更快的理解代码逻辑。找到出发点（入口文件），然后一步步向内扩散解读各个细节。读源码时遇到核心代码需要一行行认真阅读其他的知道其大概用处就行，当然有些看似不那么关键的代码却也值得学习的。

axios特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

step

准备工作

• 在github上拉最新的axios代码
• 全局安装gruntnpm install -g grunt-cli，用于打包构建axios
• 打开文档，先过一遍api，了解其用法

目录解析

lib  
│  ├─ adapters                   适配不同环境
│  │  ├─ http.js                 node环境创建 http 请求
│  │  └─ xhr.js                  浏览器环境创建 XMLHttpRequests 请求
│  ├─ cancel                     取消请求
│  │  ├─ Cancel.js               定义Cancel
│  │  ├─ CancelToken.js          取消请求操作的对象
│  │  └─ isCancel.js             判断是否是Cancel
│  ├─ core                       核心代码
│  │  ├─ Axios.js                创建新的Axios实例
│  │  ├─ buildFullPath.js        返回 baseURL 和 requestedURL 合并后的 URL
│  │  ├─ createError.js          使用指定的消息、配置、错误代码、请求和响应创建一个错误
│  │  ├─ dispatchRequest.js      使用适配不同环境创建的请求对象（XMLHttpRequests/http）发送请求
│  │  ├─ enhanceError.js         使用指定的配置、错误代码和响应更新一个错误
│  │  ├─ InterceptorManager.js   拦截器
│  │  ├─ mergeConfig.js          通过合并两个对象，并返回一个合并后的新对象
│  │  ├─ settle.js               基于响应状态解决或拒绝一个Promise
│  │  └─ transformData.js        转换数据格式
│  ├─ helpers                    辅助函数
│  │  ├─ bind.js                 手写bind
│  │  ├─ buildURL.js             通过在结尾添加参数来构建URL
│  │  ├─ combineURLs.js          通过组合指定的URL创建一个新的URL
│  │  ├─ cookies.js              返回读取，写入，删除cookies的方法
│  │  ├─ deprecatedMethod.js     警告
│  │  ├─ isAbsoluteURL.js        确定指定的URL是否为绝对URL
│  │  ├─ isAxiosError.js         判断是否是axios抛出的错误
│  │  ├─ isURLSameOrigin.js      判断是否同源
│  │  ├─ normalizeHeaderName.js  
│  │  ├─ parseHeaders.js   
│  │  ├─ spread.js               用法`spread(function(x, y, z) {})([1, 2, 3]);`
│  │  └─ validator.js            
│  ├─ axios.js                   入口文件
│  ├─ defaults.js                默认配置
│  └─ utils.js                   公共方法

VSCode插件ProjectTree，输出项目树状图

• 首先看package.json文件"main": "index.js"，即入口文件为根目录下的index.js文件

// index.js
module.exports = require('./lib/axios'); // 引用的是./lib/axios文件

调试

• 由package.json文件"build": "NODE_ENV=production grunt build"可知，这里使用的打包构建工具是grunt；那么如果你修改了某行代码后就可以执行命令行grunt build重新打包
• 由package.json文件 "examples": "node ./examples/server.js"可知，这里提供一个搭好了的测试用例，我们只需要执行命令行npm examples即可；server.js搭了一个简易的node服务器，地址为localhost:3000

@@ 详细注释代码axios源码注释

相关资源

• github
• 中文文档
• 深入浅出 axios 源码