vue中axios防止多次觸發,終止多次請求（防抖）

需求

例如在搜索框中，並不是你輸入一個字就需要渲染一次數據，而是取最后一次的輸入內容進行搜索。

連續按下 AAAAA ，只取最后一次按下時搜索框的內容（即：AAAAA）進行搜索。 而不是搜索跟 A（第一次按下），AA（第二次按下），AAA相關聯的內容

 

本文例子:  檢測用戶輸入的值,監測這個值,然后根據值調用接口查詢結果

代碼：

 

<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) => {
                // 在這里處理得到的數據
                //數據邏輯處理
            }).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()  截取，設置一定時常請求一次

    

 

 

引自：https://segmentfault.com/a/1190000016963943