vue项目中请求完成之前点击按钮开始另一个请求 数据展示错误解决办法

今天公司的项目出了个bug----有一个标签页通过按钮点击发送请求不同数据，前一个请求结束之前点击另一个按钮 数据展示会出现问题 本该第一个接口返回渲染的数据出现在了第二个页面

解决办法：添加全局请求拦截器 在请求拦截器中加上取消请求标识 通过cancelToken方法中断未完成的请求 代码如下——

//-----在封装的axios请求的js文件中-----

window.axiosCancel = []  // 全局定义一个存放取消请求的标识

 //在请求拦截器中加入取消请求标识
  config.cancelToken = new axios.CancelToken(cancel => {
    window.axiosCancel.push({
      cancel
    })
  })

//-----在组件内的使用----------
//在methods中定义cancel方法
cancel(){
    let cancelArr = window.axiosCancel;
    cancelArr = cancelArr || []      //判断空值
    cancelArr.forEach((ele, index) => {
        ele.cancel("取消了请求")  // 在失败函数中返回这里自定义的错误信息
        delete window.axiosCancel[index]
    })
},
//按钮点击事件
handleClick(){
    //------调用请求中断方法-----
    this.cancel()
    //数据请求接口
    getData().then(res =>{})
}

此文章旨在自己记录学习，方便日后查阅