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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue開發(fā)h5項目特別是移動端的項目，很多都是打包后掛載在原生APP上的，這篇文章主要介紹了vue與原生app的對接交互的方法，非常具有實用價值，需要的朋友可以參考下2018-11-11
Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴
這篇文章主要介紹了Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Pinia是Vue的一個存儲庫,它允許你跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了關(guān)于vue3+pinia的快速入門使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue-router路由傳參及隱藏參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本篇文章主要給大家詳細代碼講解了vue2.0 elementUI制作面包屑導航欄的過程，對此有興趣的朋友可以學習下。2018-02-02
這篇文章主要為大家詳細介紹了Vue實現(xiàn)圖書管理案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
webpack是一個模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue中關(guān)于computed的this指向問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
利用 vue-cli 搭建的項目大都是單頁面應用項目，對于簡單的項目，單頁面就能滿足要求。這篇文章主要介紹了vue.js多頁面開發(fā)環(huán)境搭建 ,需要的朋友可以參考下2019-04-04