在vue里取消axios的请求_vue 取消 await-CSDN博客

本文链接：https://blog.csdn.net/u014627807/article/details/120941459

本文探讨了在Vue应用中遇到的公共组件根据不同tab切换数据渲染问题。当快速切换tab时，可能会导致请求交错，解决方案是在切换tab前取消当前请求。通过使用axios的CancelToken，可以在组件内创建并管理请求的取消源，确保每个tab对应的数据加载正确。同时，文章也提出了管理多个请求取消的方法，以保证在需要时能中断所有请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、搬砖遇到的问题
在搬砖的时候，遇到了一个问题，公共组件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，在页面或者数组卸载的时候，记得清空数组。