Axios使用手册

Axios

一、axios发送请求

通过创建axios实例对象，可以设置基本的请求路径和超时时间等。

特此说明：
1、 请求拦截器 如果失败的话，那么根本就不会发送请求，所以不会有响应数据，往后会直接执行 响应拦截器 失败函数。因为源码中是用了 Promise链 来实现逻辑的。
2、请求拦截器 是 后进先执行，响应拦截器 是 先进先执行。

// 1、导包
import axios from 'axios';
// 2、设置通用参数
const service = axios.create({
	baseURL: 'http://localhost:8080', //最终的请求路径 url = baseURL + requestURL
	timeout: 5000 //超时时间
})
// 3、设置请求拦截器
service.interceptors.request.use(function(config) {
	console.log("请求拦截器 成功");
	return config;
}, function(error) {
	console.log("请求拦截器 失败");
	return Promise.reject(error);
})
// 4、设置响应拦截器
service.interceptors.response.use(function(response) {
	console.log("响应拦截器 成功");
	return response;
}, function(error) {
	console.log("响应拦截器 失败");
	return Promise.reject(error);
})
// 5、导出
export default service;

二、axios取消请求

取消请求可以达到 防抖 的效果，避免用户多次点击请求而造成网络拥塞。

import axios from 'axios';

// 设置全局变量实现防抖功能
let cancel = null;

// 发送请求函数
function() {
	if(cancel != null) {
		// 请求上一次的请求
		cancel();
	}
	axios({
		url: "http://localhost:8080/api",
		method: "POST",
		// 添加配置对象属性
		cancelToken: new axios.CancelToken(function(c) {
			cancel = c;
		})
	}).then(response => {
		console.log(response);
		// 还原 cancel 的值
		cancel = null;
	})
}

二、参考资料

GitHub地址
axios官方文档