首页 > 移动平台 > 详细

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

时间:2020-09-19 18:08:37      阅读:97      评论:0      收藏:0      [点我收藏+]

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

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

页面加载就发送请求

  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

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

原文:https://www.cnblogs.com/johu/p/13696347.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!