vue axios請求頻繁時(shí)取消上一次請求的方法
更新時(shí)間：2018年11月10日 10:06:21 作者：Peggy7
這篇文章主要介紹了vue axios請求頻繁時(shí)取消上一次請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
一、前言
在項(xiàng)目中經(jīng)常有一些場景會連續(xù)發(fā)送多個(gè)請求，而異步會導(dǎo)致最后得到的結(jié)果不是我們想要的，并且對性能也有非常大的影響。例如一個(gè)搜索框，每輸入一個(gè)字符都要發(fā)送一次請求，但輸入過快的時(shí)候其實(shí)前面的請求并沒有必要真的發(fā)送出去，這時(shí)候就需要在發(fā)送新請求的時(shí)候直接取消上一次請求。
二、代碼
<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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
今天小編就為大家分享一篇Vue表單及表單綁定方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了一個(gè)Vue頁面的內(nèi)存泄露分析詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue之如何實(shí)現(xiàn)打印功能問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中，setup?中提供了?defineExpose()?方法，該方法可以將組件內(nèi)部的方法暴露給父組件，這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10
在Vue項(xiàng)目中引入Echarts繪制K線圖的方法技巧
在Vue項(xiàng)目開發(fā)中,數(shù)據(jù)可視化是一項(xiàng)重要的任務(wù),Echarts是一個(gè)由百度開源的數(shù)據(jù)可視化庫,提供了豐富的圖表類型和強(qiáng)大的交互功能,其中,K線圖常用于展示金融數(shù)據(jù)的走勢,本文將詳細(xì)介紹如何在Vue項(xiàng)目中引入Echarts并繪制K線圖,需要的朋友可以參考下2025-04-04
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
文章介紹了如何在Vue項(xiàng)目中對接DeepSeek API,包括在開放平臺注冊賬號申請APIKey、安裝axios庫、創(chuàng)建API調(diào)用函數(shù)以及在Vue組件中調(diào)用該函數(shù)2025-01-01
解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時(shí)key值報(bào)錯的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了在Vue中使用WebScoket，網(wǎng)絡(luò)的不穩(wěn)定而斷開連接，webscoket不會出現(xiàn)異常，下面就一起進(jìn)入文章看看吧2022-01-01