axios 原理
# 执行流程
整体流程
request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)
request(config)
将请求拦截器 / dispatchRequest() / 响应拦截器 通过 promise 链串连起来, 返回 promise
dispatchRequest(config)
转换请求数据 ===> 调用 xhrAdapter() 发请求 ===> 请求返回后转换响应数据. 返回 promise
xhrAdapter(config)
创建 XHR 对象, 根据 config 进行相应设置, 发送特定请求, 并接收响应数据, 返回 promise
# 请求/响应拦截
# 请求拦截器
在真正发送请求前执行的回调函数，可以对请求进行检查或配置进行特定处理，成功的回调函数，传递的默认是 config (也必须是)，失败的回调函数, 传递的默认是 error
# 响应拦截器
在请求得到响应后执行的回调函数，可以对响应数据进行特定处理，成功的回调函数，传递的默认是 response 失败的回调函数,传递的默认是 error
# 请求/响应数据转换器
请求转换器: 对请求头和请求体数据进行特定处理的函数
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data);
}
2
3
4
响应转换器: 将响应体 json 字符串解析为 js 对象或数组的函数
response.data = JSON.parse(response.data)
response 的整体结构
{
data,
status,
statusText,
headers,
config,
request
}
2
3
4
5
6
7
8
error 的整体结构
{
message,
response,
request,
}
2
3
4
5
# 取消请求
当配置了cancelToken 对象时
保存 cancel 函数 ，创建一个用于将来中断请求的 cancelPromise，并定义了一个用于取消请求的 cancel 函数 ，将 cancel 函数传递出来
调用 cancel() 取消请求
执行 cacel 函数, 传入错误信息 message，内部会让 cancelPromise 变为成功, 且成功的值为一个Cancel 对象 ，在 cancelPromise 的成功回调中中断请求, 并让发请求的 proimse 失败, 失败的 reason为 Cacel对象
