axios 是什么
axios 是前端最流行的 ajax哀求库
react/vue 官方都推荐使用axios 发 ajax 哀求
axios 特点
- 基于 xhr + promise 的异步 ajax 哀求库
- 浏览器端/node 端都可以使用
- 支持哀求／相应拦截器
- 支持哀求取消
- 哀求/相应数据转换
- 批量发送多个哀求
axios 常用语法
axios(config): 通用/最本质的发任意范例哀求的方式
axios(url[, config]): 可以只指定 url 发 get 哀求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 哀求
axios.delete(url[, config]): 发 delete 哀求
axios.post(url[, data, config]): 发 post 哀求
axios.put(url[, data, config]): 发 put 哀求
axios.defaults.xxx: 哀求的默认全局配置
axios.interceptors.request.use(): 添加哀求拦截器
axios.interceptors.response.use(): 添加相应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消哀求的错误对象
axios.CancelToken(): 用于创建取消哀求的 token 对象
axios.isCancel(): 是否是一个取消哀求的错误
axios.all(promises): 用于批量执行多个异步哀求
axios.spread(): 用来指定吸收全部乐成数据的回调函数的方法
axios 的默认设置
axios 创建实例对象发送哀求
创建不同的实例对象，你想给谁发就对应哪个实例对象。
axios 取消哀求
instance 与 axios 的区别
1.类似:
(1) 都是一个能发任意哀求的函数: request(config)
(2) 都有发特定哀求的各种方法: get()/post()/put()/delete()
(3) 都有默认配置和拦截器的属性: defaults/interceptors
2.不同:
(1) 默认配置很可能不一样
(2) instance 没有 axios 后面添加的一些方法: create()/CancelToken()/all()
axios 运行的整天流程
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 的哀求/相应拦截器是什么
- 哀求拦截器:
在真正发送哀求前执行的回调函数
可以对哀求进行查抄或配置进行特定处理
乐成的回调函数, 通报的默认是 config(也必须是)
失败的回调函数, 通报的默认是 error
- 相应拦截器
在哀求得到相应后执行的回调函数
可以对相应数据进行特定处理
乐成的回调函数, 通报的默认是 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 函数
(1) 创建一个用于将来中断哀求的 cancelPromise
(2) 并界说了一个用于取消哀求的 cancel 函数
(3) 将 cancel 函数通报出来
- 调用 cancel()取消哀求
(1) 执行 cacel 函数, 传入错误信息 message
(2) 内部会让 cancelPromise 变为乐成, 且乐成的值为一个 Cancel 对象
(3) 在 cancelPromise 的乐成回调中中断哀求, 并让发哀求的 proimse 失败,
失败的 reason 为 Cancel 对象
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
