axios

axios的特点

前端最流行的ajax请求库

1. 基于promise的异步ajax请求库
2. 可以在浏览器端和node服务器端使用
3. 支持请求/响应拦截
4. 支持请求取消
5. 支持请求/响应数据的转换
6. 可以批量发送多个请求

axios和Axios的关系

1. 从语法上说axios不是Axios的实例，从功能上说axios是Axios的实例
2. axios作为对象具有Axios原型对象上所有方法，有Axios对象的所有属性
3. axios是Axios.prototype.request函数bind()返回的函数

axios和instance的区别

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

相同点：

1. 都是一个能发任意请求的函数：request(config);
2. 都有发特定请求的函数：get()、post()、put()、delete（）
3. 都有默认配置和拦截器属性：defaults、interceptors

不同点：

1. 默认配置的值可能不一样

axios是默认创建的，使用的也是默认的config
instance是我们自己创建的，可以传入相关的config
当传入的config是空对象是，这两个的配置则相同

2. instance没有axios后面添加的方法：Cancel()、CancelToken()、isCancel()、all()

axios运行的整体流程

1. request(config)

串联：将请求拦截器、dispatchRequest(config)、响应拦截器通过promise链串联起来，并返回promise对象

2. dispatchRequest(config)

转换数据：转换请求体数据、转换响应体数据、调用**xhrAdapter(config)**发送请求，并返回promise对象

3. xhrAdapter(config)

发送请求：发送请求并接受响应数据：
发送成功 =》返回一个成功的promise,并携带response数据
发送失败 =》返回一个失败的promise，并携带error对象

axios请求数据转换器和响应数据转换器是什么？

1. 请求数据转换器：对请求头和请求体数据进行特定处理的相关函数

//将对象类型的data转换为JSON类型
if(utils.isObject(data)){
    setContentTypeIfUnset(headers,'application/json;charset=utf-8');
    return JSON.stringify(data);
}

2. 响应体数据转换器：对响应体Json字符串转换为js对象或数据的函数

//将JSON字符串转为js对象或数组
response.data = JSON.parse(response.data);

如何取消未完成的请求？

1. 当配置了cancelToken对象时，并将cancel函数保存到外部
   （1）创建了一个用于中断请求的cancelPromise（内部）
   （2）定义一个用于取消请求的cancel函数（内部）
   （3）将cancel函数传递出来

内部工作：
a. 在CancelToken构造函数中传入一个执行器函数 b.定义一个用于中断请求的promise对象，并将这个promise对象的成功回调保存到外部
c,调用执行器函数，并传入用于取消请求的cancel函数
d.在执行器内部创建一个Cancel对象，参数为外部调用取消请求时传入的错误message
e.将用于中断请求的promsie指定为成功，值为一个Cancel对象

2.调用cancel()取消请求
（1）执行cancel函数，传入错误信息message
（2）内部会让cancelPromise的变为成功，且成功值是一个Cancel对象，这个对象传入的参数即使message
（3）在cancelPromise的成功回调中中断请求，并让发请求的promise失败（失败的reason为Cancel对象）