Axios学习（一）：Axios的理解与使用

1. axios 是什么?

• 前端最流行的 ajax 请求库
• react/vue 官方都推荐使用 axios 发 ajax 请求
• 中文文档

2. 特点

• 基于 xhr + promise 的异步 ajax 请求库
• 浏览器端/node 端都可以使用
• 支持请求／响应拦截器
• 支持请求取消
• 请求/响应数据转换
• 批量发送多个请求
• 客户端支持防御 XSRF

3. 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(): 用来指定接收所有成功数据的回调函数的方法

4. 原理图

5. 难点语法的理解和使用

5.1 axios.create(config)

• 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
• 新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
• 为什么要设计这个语法?
  • 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
  • 解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要 求的接口请求中

//创建实例对象  /getJoke
const duanzi = axios.create({
	baseURL: 'https://api.apiopen.top',
	timeout: 2000
});
const onather = axios.create({
	baseURL: 'https://b.com',
	timeout: 2000
});
duanzi.get('/getJoke').then(response => {
	console.log(response.data)
})

5.2 拦截器函数/ajax 请求/请求的回调函数的调用顺序

• 说明: 调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程
• 流程: 后声明的请求拦截器 => 先声明的请求拦截器 => 发ajax请求 => 先声明的响应拦截器 => 后声明的响应拦截器 => 请求的回调
• 注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是 config , 响应 拦截器传递的是 response

// 设置请求拦截器  config 配置对象
axios.interceptors.request.use(function (config) {
	console.log('请求拦截器 成功 - 1号');
	//修改 config 中的参数
	config.params = {
		a: 100
};
	return config;
}, function (error) {
	console.log('请求拦截器 失败 - 1号');
	return Promise.reject(error);
});

axios.interceptors.request.use(function (config) {
	console.log('请求拦截器 成功 - 2号');
	//修改 config 中的参数
	config.timeout = 2000;
	return config;
}, function (error) {
	console.log('请求拦截器 失败 - 2号');
	return Promise.reject(error);
});

// 设置响应拦截器
axios.interceptors.response.use(function (response) {
	console.log('响应拦截器 成功 - 1号');
	return response.data;
	// return response;
}, function (error) {
	console.log('响应拦截器 失败 - 1号')
	return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
	console.log('响应拦截器 成功 - 2号')
	return response;
}, function (error) {
	console.log('响应拦截器 失败 - 2号')
	return Promise.reject(error);
});

//发送请求
axios({
	method: 'GET',
	url: 'http://localhost:3000/posts'
}).then(response => {
	console.log('自定义回调处理成功的结果');
	console.log(response);
});
/*
请求拦截器 成功 - 2号
请求拦截器 成功 - 1号
响应拦截器 成功 - 1号
响应拦截器 成功 - 2号
自定义回调处理成功的结果
...
*/

5.3 取消请求

• 基本流程 配置 cancelToken 对象
• 缓存用于取消请求的 cancel 函数
• 在后面特定时机调用 cancel 函数取消请求
• 在错误回调中判断如果 error 是 cancel, 做相应处理
• 实现功能 点击按钮, 取消某个正在请求中的请求

//获取按钮
const btns = document.querySelectorAll('button');
//2.声明全局变量
let cancel = null;
//发送请求
btns[0].onclick = function () {
	//检测上一次的请求是否已经完成
	if (cancel !== null) {
		//取消上一次的请求
		cancel();
	}
	axios({
		method: 'GET',
		url: 'http://localhost:3000/posts',
		//1. 添加配置对象的属性
		cancelToken: new axios.CancelToken(function (c) {
			//3. 将 c 的值赋值给 cancel
			cancel = c;
		})
	}).then(response => {
		console.log(response);
		//将 cancel 的值初始化
		cancel = null;
	})
}

//绑定第二个事件取消请求
btns[1].onclick = function () {cancel(); }

6. 默认配置

//默认配置
axios.defaults.method = 'GET';//设置默认的请求类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};
axios.defaults.timeout = 3000;

btns[0].onclick = function(){
	axios({
		url: '/posts'
	}).then(response => {
		console.log(response);
	})
}