vue axios請(qǐng)求頻繁時(shí)取消上一次請(qǐng)求的方法
更新時(shí)間：2018年11月10日 10:06:21 作者：Peggy7
這篇文章主要介紹了vue axios請(qǐng)求頻繁時(shí)取消上一次請(qǐng)求的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一、前言
在項(xiàng)目中經(jīng)常有一些場(chǎng)景會(huì)連續(xù)發(fā)送多個(gè)請(qǐng)求，而異步會(huì)導(dǎo)致最后得到的結(jié)果不是我們想要的，并且對(duì)性能也有非常大的影響。例如一個(gè)搜索框，每輸入一個(gè)字符都要發(fā)送一次請(qǐng)求，但輸入過(guò)快的時(shí)候其實(shí)前面的請(qǐng)求并沒(méi)有必要真的發(fā)送出去，這時(shí)候就需要在發(fā)送新請(qǐng)求的時(shí)候直接取消上一次請(qǐng)求。
二、代碼
<script>
import axios from 'axios'
import qs from 'qs'
export default {
methods: {
request(keyword) {
var CancelToken = axios.CancelToken
var source = CancelToken.source()
// 取消上一次請(qǐng)求
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); //請(qǐng)求如果被取消，這里是返回取消的message
} else {
//handle error
console.log(err);
}
})
},
cancelRequest(){
if(typeof this.source ==='function'){
this.source('終止請(qǐng)求')
}
},
}
}
</script>
三、結(jié)語(yǔ)
這樣就可以成功取消上一次請(qǐng)求啦！以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue與原生app的對(duì)接交互的方法(混合開發(fā))
vue開發(fā)h5項(xiàng)目特別是移動(dòng)端的項(xiàng)目，很多都是打包后掛載在原生APP上的，這篇文章主要介紹了vue與原生app的對(duì)接交互的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴
這篇文章主要介紹了Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Pinia是Vue的一個(gè)存儲(chǔ)庫(kù),它允許你跨組件/頁(yè)面共享狀態(tài),下面這篇文章主要給大家介紹了關(guān)于vue3+pinia的快速入門使用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue-router路由傳參及隱藏參數(shù)問(wèn)題
這篇文章主要介紹了vue-router路由傳參及隱藏參數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
本篇文章主要給大家詳細(xì)代碼講解了vue2.0 elementUI制作面包屑導(dǎo)航欄的過(guò)程，對(duì)此有興趣的朋友可以學(xué)習(xí)下。2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書管理案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
腳手架vue-cli工程webpack的作用和特點(diǎn)
webpack是一個(gè)模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點(diǎn),需要的朋友可以參考下2018-09-09
vue中關(guān)于computed的this指向問(wèn)題
這篇文章主要介紹了vue中關(guān)于computed的this指向問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue.js多頁(yè)面開發(fā)環(huán)境搭建過(guò)程
利用 vue-cli 搭建的項(xiàng)目大都是單頁(yè)面應(yīng)用項(xiàng)目，對(duì)于簡(jiǎn)單的項(xiàng)目，單頁(yè)面就能滿足要求。這篇文章主要介紹了vue.js多頁(yè)面開發(fā)環(huán)境搭建 ,需要的朋友可以參考下2019-04-04