对「axios」的一些理解携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

以前的ajax，现在的axios。

现在说axios是最流行的请求库，没有意见吧。axios的好处太多了，他是基于 xhr + promise 的异步 ajax 请求库，支持请求／响应拦截器；支持请求取消；请求/响应数据转换；批量发送多个请求，特点及优点太多了，这里就不一一列举了。

axios.create(config)
- 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
- 解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中
拦截器函数/ajax 请求/请求的回调函数的调用顺序
1. 说明: 调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程
2. 流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器 2 => 请求的回调
3. 注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应拦截器传递的是 response
取消请求
- 过程：配置 cancelToken 对象缓存用于取消请求的 cancel 函数在后面特定时机调用 cancel 函数取消请求在错误回调中判断如果 error 是 cancel, 做相应处理
- 作用：点击按钮, 取消某个正在请求中的请求，在请求一个接口前, 取消前面一个未完成的请求

axios 与 Axios 的关系
- 从语法上来说: axios 不是 Axios 的实例
- 从功能上来说: axios 是 Axios 的实例
- axios 是 Axios.prototype.request 函数 bind()返回的函数
- axios 作为对象有 Axios 原型对象上的所有方法, 有 Axios 对象上所有属性
instance 与 axios 的区别
- 相同:
  - 都是一个能发任意请求的函数: request(config)
  - 都有发特定请求的各种方法: get()/post()/put()/delete()
  - 都有默认配置和拦截器的属性: defaults/interceptors
- 不同:
  - 默认配置很可能不一样
  - instance 没有 axios 后面添加的一些方法: create()/CancelToken()/all()
axios 运行流程

axios 请求/响应数据转换器

请求转换器: 对请求头和请求体数据进行特定处理的函数

if (utils.isObject(data)) { 
    setContentTypeIfUnset(headers, 'application/json;charset=utf-8');\
    return JSON.stringify(data); 
}

响应转换器: 将响应体 json 字符串解析为 js 对象或数组的函数
```
  response.data = JSON.parse(response.data)
```