axios请求拦截器中取消请求

对某些特定请求，可以在请求拦截器中进行判断，是否取消改请求

起因：一个商城的首页，有商品的展示，可以直接添加到购物车；

但一般进入首页不会要求用户登录，如果添加购物车，提示用户进行登录；

但是这个添加购物车的请求依然会发出，这时需要在请求拦截内进行处理

下面是完整代码：

import axios from 'axios';
import {Message} from 'element-ui'
import router from '../router/index'
// 按照axios官方提示需要引入这两步
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

const instance = axios.create({
	baseURL: "http://xxx.xxx.xxx",
	timeout: 5000,
	headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

// 请求拦截器
instance.interceptors.request.use(config => {
	let tokenS = sessionStorage.getItem('token');
	let tokenL = localStorage.getItem('token');
	if (tokenS || tokenL) {
		config.headers['token'] = tokenS || tokenL;
	} else {
		if (config.url === '/order/shoppingCart') {
			// 当没有token时，发送了添加购物车的请求，此时取消本次请求
			config.cancelToken = source.token;
			// cancel函数可以不用传参，也可以传入取消后执行的操作，取消后可提示用户需要登录
			source.cancel(Message({message: '请先登录再添加购物车', type: 'warning', center: true, duration: 1500}));
			// 定时器1.5s后自动跳转到登录页
			setTimeout(() => {router.push('/login')}, 1500);
		} else if (config.url === '/order/wish') {
			config.cancelToken = source.token;
			source.cancel(Message({message: '请先登录再添加心愿', type: 'warning', center: true, duration: 1500}));
			setTimeout(() => {router.push('/login')}, 1500);
		}
	}
	return config;
}, err => {
	return Promise.reject(err);
})

但是还需注意，这样虽然可以取消请求，但是在控制会出现一个报错；

意思是没有捕获Promise这个Cancel，最开始我以为是在 source.cancel()后加.catch(err => {});

是没有效果的，因为cancel()函数没有返回Promise，这里只有在请求中才会涉及到Promise；

所以这个捕获应该加在发送请求的位置，代码如下：

// 添加到购物车
addCar(id) {
	postShoppingCart({ productId: id }).then((res) => {
		if (res.code === 200) {
			this.$message(
				{message: '添加成功', type: 'success', center: true, duration: 1500}
			);
		}
	}).catch(err => {  }) // 捕获报错
},

个人习惯问题，一般不会在请求之后加catch，加上这个错误捕获之后，控制不会出现报错；

至此，axios请求拦截器中取消请求结束！