axios点击停掉之前的请求发送新请求

又是项目上的需求，又是后端程序猿的请求速度不给力，整的前端来优化响应速度 🐴
本次奇葩需求是后端怕用户连续点击发送请求，后端数据结果跟不上可能导致数据错乱的问题。

解决办法就是发下一次请求之前停掉之前的请求，这个解决办法只适用于参数可循环配置的请求
接下来就是前端程序猿的自我救赎😎

页面加载就发送请求

  mounted () {
    this.CancelToken = axios.CancelToken
    this.source = this.CancelToken.source()

    let promiseAll = []
    // 构建请求数组
    for (let i = 0; i < 10; i++) {
      promiseAll.push(axios.get('/user?id=' + i, {
        cancelToken: this.source.token
      }))
    }
    // 异步发送十个请求
    Promise.all(promiseAll).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
  }

写一个button触发事件

<el-button @click="stopRes">停!!!</el-button>

停掉之前请求，再次发送新请求

stopRes () {
      this.source.cancel('Canceled.')
      this.CancelToken = axios.CancelToken
      this.source = this.CancelToken.source()

      let promiseAll = []
      for (let i = 0; i < 10; i++) {
        promiseAll.push(axios.get('/user?id=' + i, {
          cancelToken: this.source.token
        }))
      }
      Promise.all(promiseAll).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    }

观察效果前使用F12把网速调慢

由于每次点击CancelToken都会被更新，所以每次发送的十个请求都会被区别，这也是axios批量取消请求的精髓

上面取消的请求就是证明

拓展

如果不想循环构造发送请求数组，自己也可自定义promiseAll请求数组

有一说一，axios是个好东西😊

参考文章

axios官网
MDN
CSDN