一、axios 源码分析的总结
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
的不同点,如下所示:
- 默认配置很可能不一样
instance
没有 axios
后面添加的一些方法: create()/CancelToken()/all()
axios
运行的整体流程,如下所示:
- 整体流程:
request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)
request(config)
:
将请求拦截器 / dispatchRequest()
/ 响应拦截器 通过 promise
链串连起来, 返回 promise
dispatchRequest(config)
:
转换请求数据 ===> 调用 xhrAdapter()
发请求 ===> 请求返回后转换响应数据. 返回 promise
xhrAdapter(config)
:
创建 XHR
对象, 根据 config
进行相应设置, 发送特定请求, 并接收响应数据, 返回 promise
axios
的请求拦截器是什么,如下所示:
- 在真正发送请求前执行的回调函数
- 可以对请求进行检查或配置进行特定处理
- 成功的回调函数,传递的默认是
config
(也必须是) - 失败的回调函数, 传递的默认是
error
axios
的响应拦截器是什么,如下所示:
- 在请求得到响应后执行的回调函数
- 可以对响应数据进行特定处理
- 成功的回调函数, 传递的默认是
response
- 失败的回调函数, 传递的默认是
error
axios
的请求/响应数据转换器是什么,如下所示:
- 请求转换器,对请求头和请求体数据进行特定处理的函数,代码如下:
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringify(data);
}
- 响应转换器,将响应体
json
字符串解析为 js
对象或数组的函数,代码如下:
response.data = JSON.parse(response.data)
response
的整体结构,代码如下:
{
data,
status,
statusText,
headers,
config,
request
}
error
的整体结构,如下所示:
{
message,
response,
request,
}
- 如何取消未完成的请求,如下所示:
- 当配置了
cancelToken
对象时, 保存 cancel
函数,如下:
- 创建一个用于将来中断请求的
cancelPromise
- 并定义了一个用于取消请求的
cancel
函数 - 将
cancel
函数传递出来
- 调用
cancel()
取消请求,如下:
- 执行
cancel
函数, 传入错误信息 message
- 内部会让
cancelPromise
变为成功, 且成功的值为一个 Cancel
对象 - 在
cancelPromise
的成功回调中中断请求, 并让发请求的 proimse
失败, 失败的 reason
为 Cancel
对象