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

更新時間：2018年11月10日 10:06:21 作者：Peggy7

這篇文章主要介紹了vue axios請求頻繁時取消上一次請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、前言

在項目中經(jīng)常有一些場景會連續(xù)發(fā)送多個請求，而異步會導致最后得到的結(jié)果不是我們想要的，并且對性能也有非常大的影響。例如一個搜索框，每輸入一個字符都要發(fā)送一次請求，但輸入過快的時候其實前面的請求并沒有必要真的發(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue實現(xiàn)搜索功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
Vue表單及表單綁定方法
今天小編就為大家分享一篇Vue表單及表單綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
一個Vue頁面的內(nèi)存泄露分析詳解
這篇文章主要介紹了一個Vue頁面的內(nèi)存泄露分析詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
vue之如何實現(xiàn)打印功能
這篇文章主要介紹了vue之如何實現(xiàn)打印功能問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下
2022-10-10
在Vue項目中引入Echarts繪制K線圖的方法技巧
在Vue項目開發(fā)中,數(shù)據(jù)可視化是一項重要的任務,Echarts是一個由百度開源的數(shù)據(jù)可視化庫,提供了豐富的圖表類型和強大的交互功能,其中,K線圖常用于展示金融數(shù)據(jù)的走勢,本文將詳細介紹如何在Vue項目中引入Echarts并繪制K線圖,需要的朋友可以參考下
2025-04-04
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關于element中el-autocomplete的常見用法的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用element具有一定的參考學習價值,需要的朋友可以參考下
2023-03-03
VUE對接deepseekAPI調(diào)用方式
文章介紹了如何在Vue項目中對接DeepSeek API,包括在開放平臺注冊賬號申請APIKey、安裝axios庫、創(chuàng)建API調(diào)用函數(shù)以及在Vue組件中調(diào)用該函數(shù)
2025-01-01
解決vue v-for 遍歷循環(huán)時key值報錯的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時key值報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
在Vue中使用WebScoket?會怎么樣？
這篇文章主要介紹了在Vue中使用WebScoket，網(wǎng)絡的不穩(wěn)定而斷開連接，webscoket不會出現(xiàn)異常，下面就一起進入文章看看吧
2022-01-01