[JavaScript知识库]在vue里取消axios的请求

一、搬砖遇到的问题
在搬砖的时候，遇到了一个问题，公共组件A是需要传一个数组进去渲染，在tab1下面是需要从接口请求返回的数据渲染，在tab2下则是读取配置文件的内容。在网络比较慢的情况下，快速从tab2切换到tab1再切换回tab2的时候，会先渲染tab2从配置文件中读取数组，然后再渲染成tab1请求回来的数据列表，然后就不再变化了。

二、如此就需要在切换到tab2之前，把tab1的请求给取消了。

三、具体的方法：

取消单个请求的方法，可以像下面的方法，把CancelToken的source放在data里，初始化组件的时候，可以赋值，要取消请求的时候，就直接source.cancel就可以了。

import axios from 'axios';

export default {
	data: () => ({
		source: null,
	}),
	mounted() {
		this.source = axios.CancelToken.source();
	},
	methods: {
		async getList() {
			const { data, code } = await axios.get(
				'/XXXX/XXXX/',
				{ 
					cancelToken: this.source.token,
				}
			)
		},
		changeTab() {
			this.source.cancel('change tab');
		},
	}
}

取消多个请求，可以把CancelToken取出来，每个请求都重新new一个cancelToken，并把每个cancelToken放到 一个公共数组里，在需要所有的请求都中断时，就遍历数组，每个都执行一遍。在请求完成的时候，要在数组中去掉对应的cancelToken，在页面或者数组卸载的时候，记得清空数组。