vue中axios防止多次触发,终止多次请求（防抖）

问题描述

例如：在搜索框中，并不是你输入一个字就需要渲染一次数据，而是取最后一次的输入内容进行搜索。

连续按下 AAAAA ，只取最后一次按下时搜索框的内容（即：AAAAA）进行搜索。 而不是搜索跟 A（第一次按下），AA（第二次按下），AAA相关联的内容

---

解决方案：

1.axios自带撤销请求;

<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>

2.定时器;

clearTimeout()   
setTimeout()  //截取，设置一定时常请求一次