axios（三）- 源码

0、热门请求库

1、axios的特性

2、axios的使用

3、核心目录结构

4、执行流程

5、Axios 中的公共方法

6、Axios 如何支持不同的使用方式?

7、 请求 / 响应拦截器是如何生效的？

8、派发请求 dispatchRequest

9、转换请求 / 响应数据

10、适配器（adapter）处理请求

11、取消请求

12、自己写一个 取消重复请求

13、总结

热门请求库

热门 JS HTTP 请求库	特性简介
Axios	基于 Promise，支持浏览器和 node
Request	不基于 Promise，简化版的 HTTP
Fetch	基于 Promise，不支持 node 调用

axios的特性

特性：

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

axios的使用

先来个总结，axios的使用

核心目录结构

lib
└─ adapters    // 适配器，兼容xhr和node
   ├─ http.js // node 环境下利用 http 模块发起请求
   ├─ xhr.js // 浏览器环境下利用 xhr 发起请求
└─ cancel    // 取消请求
   ├─ Cancel.js
   ├─ CancelToken.js
   ├─ isCancel.js
└─ core        // 核心源码，包含拦截器等
    ├─ Axios.js // 生成 Axios 实例
    ├─ InterceptorManager.js // 拦截器
    ├─ dispatchRequest.js  // 调用适配器发起请求
    ...
└─ helpers    // 辅助方法
    ├─ mergeConfig.js // 合并配置
    ├─ …
├─ axios.js    // 入口文件
├─ defaults.js    // 默认配置
├─ utils.js       // 公共工具方法   

执行流程

思路：

1. axios.create 创建单独实例，或直接使用 axios 实例(axios/axios.get…)
2. request 方法是入口，axios/axios.get 等调用都会走进 request 进行处理
3. 请求拦截器
4. 请求数据转换器，对传入的参数 data 和 header 做数据处理，比如 JSON.stringify(data)
5. 适配器，判断是浏览器端还是 node 端，执行不同的方法
6. 响应数据转换器，对服务端的数据进行处理，比如 JSON.parse(data)
7. 响应拦截器，对服务端数据做处理，比如 token 失效退出登陆，报错 dialog 提示
8. 返回数据给开发者

1、整体流程
request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)
2. request(config):
将请求拦截器 / dispatchRequest() / 响应拦截器 通过 promise 链串连起来,
返回 promise
3. dispatchRequest(config):
转换请求数据 ===> 调用 xhrAdapter()发请求 ===> 请求返回后转换响应数
据. 返回 promise
4. xhrAdapter(config):
创建 XHR 对象, 根据 config 进行相应设置, 发送特定请求, 并接收响应数据,
返回 promise

总结：

为了支持 axios() 简洁写法，内部使用 request 函数作为新实例
使用 promsie 链式调用的巧妙方法，解决顺序调用问题
数据转换器方法使用数组存放，支持数据的多次传输与加工
适配器通过兼容浏览器端和 node 端，对外提供统一 api
取消请求这块，通过外部保留 pendding 状态，控制 promise 的执行时机