axios點擊停掉之前的請求發送新請求

本文轉載自查看原文 2020-09-19 15:16 506 項目日常

又是項目上的需求，又是后端程序猿的請求速度不給力，整的前端來優化響應速度 🐴
本次奇葩需求是后端怕用戶連續點擊發送請求，后端數據結果跟不上可能導致數據錯亂的問題。

解決辦法就是發下一次請求之前停掉之前的請求，這個解決辦法只適用於參數可循環配置的請求
接下來就是前端程序猿的自我救贖😎

頁面加載就發送請求

  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批量取消請求的精髓