vue axios請求頻繁時取消上一次請求的方法

發(fā)布時間：2020-09-22 15:44:01 來源：腳本之家閱讀：202 作者：Peggy7 欄目：web開發(fā)

一、前言

在項(xiàng)目中經(jīng)常有一些場景會連續(xù)發(fā)送多個請求，而異步會導(dǎo)致最后得到的結(jié)果不是我們想要的，并且對性能也有非常大的影響。例如一個搜索框，每輸入一個字符都要發(fā)送一次請求，但輸入過快的時候其實(shí)前面的請求并沒有必要真的發(fā)送出去，這時候就需要在發(fā)送新請求的時候直接取消上一次請求。

二、代碼

<script>
import axios from 'axios'
import qs from 'qs'

export default {
  methods: {
    request(keyword) {
      var CancelToken = axios.CancelToken
      var source = CancelToken.source()
       
      // 取消上一次請求
      this.cancelRequest();
      
      axios.post(url, qs.stringify({kw:keyword}), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'application/json'
        },
        cancelToken: new axios.CancelToken(function executor(c) {
          that.source = c;
        })
      }).then((res) => {
        // 在這里處理得到的數(shù)據(jù)
        ...
      }).catch((err) => {
        if (axios.isCancel(err)) {
          console.log('Rquest canceled', err.message); //請求如果被取消，這里是返回取消的message
        } else {
          //handle error
          console.log(err);
        }
      })
    },
    cancelRequest(){
      if(typeof this.source ==='function'){
        this.source('終止請求')
      }
    },
  }
}
</script>

三、結(jié)語

這樣就可以成功取消上一次請求啦！以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue axios請求頻繁時取消上一次請求的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽