axios的理解和使用
axios的理解和使用
axios的特点
- 基于xhr/http包 + 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.create([config]): 创建一个新的axios(它没有下面的功能)
- axios.defaults.xxx: 请求的默认全局配置
- axios.interceptors.request.use(): 添加请求拦截器
- axios.interceptors.response.use(): 添加响应拦截器
- axios.Cancel(): 用于创建取消请求的错误对象
- axios.CancelToken(): 用于创建取消请求的token对象
- axios.isCancel(): 是否是一个取消请求的错误
- axios.all(promises): 用于批量执行多个异步请求
- axios.spread(): 用来指定接收所有成功数据的回调函数的方法
axios的二次封装
- 请求loading
- token处理: 通过请求头携带token数据, 对token进行校验处理
- 异步请求成功的数据不是response, 而是response.data
- 统一处理请求异常
- 对请求体参数进行urlencode处理, 而不使用默认的json方式(后台接口不支持)
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)
