vue中axios防止多次觸發(fā)終止多次請求的示例代碼（防抖）
更新時間：2020年02月16日 10:30:38 作者：東吳大嘟嘟
這篇文章主要介紹了vue中axios防止多次觸發(fā)終止多次請求的實現(xiàn)方法（防抖）,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
需求
例如在搜索框中，并不是你輸入一個字就需要渲染一次數(shù)據(jù)，而是取最后一次的輸入內(nèi)容進(jìn)行搜索。
連續(xù)按下 AAAAA ，只取最后一次按下時搜索框的內(nèi)容（即：AAAAA）進(jìn)行搜索。 而不是搜索跟 A（第一次按下），AA（第二次按下），AAA相關(guān)聯(lián)的內(nèi)容
本文例子: 檢測用戶輸入的值,監(jiān)測這個值,然后根據(jù)值調(diào)用接口查詢結(jié)果
代碼：
<template>
<input type="text" v-model="message">
<template>
<script>
import axios from "axios";
export default {
data(){
return{
message:''
},
watch : {
message(newVal){
var that = this;
// 取消上一次請求
this.cancelRequest();
axios.get('/api/searchList?cityId=10&kw='+ newVal, {
cancelToken: new axios.CancelToken(function(c) {
that.source = c;
})
}).then((res) => {
// 在這里處理得到的數(shù)據(jù)
//數(shù)據(jù)邏輯處理
}).catch((err) => {
if (axios.isCancel(err)) {
console.log('Rquest canceled', err.message); //請求如果被取消，這里是返回取消的message
} else {
//handle error
console.log(err);
}
})
}
},
methods: {
cancelRequest(){
if(typeof this.source ==='function'){
this.source('終止請求')
}
}
}
}
</script>
其他做法：
可以使用 clearTimeout() setTimeout() 截取，設(shè)置一定時常請求一次
總結(jié)
以上所述是小編給大家介紹的vue中axios防止多次觸發(fā)終止多次請求的實現(xiàn)方法（防抖），希望對大家有所幫助！
相關(guān)文章
這篇文章主要介紹了Vue如何解決每次發(fā)版都要強刷清除瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中關(guān)于$emit和$on的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue-Router-添加全局$router屬性,在 Vue 中有一個 mixin 方法，這個方法會在每個組件創(chuàng)建之前被調(diào)用，我們可以在這個方法中將 VueRouter 實例掛載到 Vue 實例上，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片拖動排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue-router跳轉(zhuǎn)方式的區(qū)別解析
在Vue中，router-link稱為聲明式路由，:to綁定為跳轉(zhuǎn)的目標(biāo)地址，一種是通過name，另一種是path，這篇文章主要介紹了vue-router跳轉(zhuǎn)方式的區(qū)別,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了Vue官網(wǎng)todoMVC示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue3新特性之在Composition API中使用CSS Modules
這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
在Vue模板中啟用這些表現(xiàn)力庫插件的最簡單方法是在初始化項目時安裝它們,或使用 npm install（或 yarn add）安裝包,這篇文章主要介紹了Vue3中如何使用SCSS編寫樣式,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue中then后的返回值解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題
今天小編就為大家分享一篇解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11