axios封装取消请求的方式

问题:项目中涉及tab切换页,tab1和tab2列表数据字段相同,所以一般使用el-tabs组件;el-tabs中的每一项el-tab 是通过v-for遍历产生的,所有的每一项el-tab中的table表格数据使用的是一个tableData存储的;此时会有问题;我们点击tab1时发送请求获取数据保存在tableData中,点击tab2时发送请求获取数据同样保存在tableData中,有时候如果tab1的请求较慢,我们从tab1切换到tab2,tab2的数据先请求回来,tab1的数据后请求回来,会导致tab1的数据覆盖tab2的数据;

解决方案:

(1)对于app来说,一般请求接口会有全局loading,所以不需要考虑’

(2)对于PC来说,如果只有两个tab页,我们完全可以定义两个tableData1,2分别存储tab1和tab2的数据

(3)对于很多个tab怎么处理:定义一个对象dataObj:{},当我们点击tab时可以根据请求结果为该对象添加响应式属性,eg:tab1请求到的数据设置this.＄set(dataObj,1,dataRet1);tab2对应this.$set(dataObj,2,dataRet2);也不是完美方案,很多个模块都有tab页,需要为每个模块的tab都这样处理

(4)配置axios取消请求:

1.定义一个map集合存储我们接口数据,map集合键key是我们请求接口(请求方式post+请求路径url),值为cancle—取消请求的函数,每一次请求时都会存储,请求成功后在响应拦截器中去除掉此次请求的存储记录

2、我们在axios请求拦截器中进行收集(key:请求方式post+请求路径url,value:axios.CancelToken—生成一个cancel令牌),即在map集合中收集我们每次发起的请求,然后进行判断,如果当前请求在pending中即存在于map集合中,我们发起同样的请求时就要取消掉我们上次的请求;