vue中axios防止多次触发,终止多次请求(防抖)

        需求

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

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

         

        代码:

        <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) => {
                        // 在这里处理得到的数据
                        ...
                    }).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>

         其他做法:

         

            可以使用  clearTimeout()   setTimeout()  截取,设置一定时常请求一次
            

         

         

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

        相关文章
        相关标签/搜索
        4887铁算盘一句解特马香港马会开码结果直播 开奖结果-香港最快开奖现场直播-王中王资料 一肖中特-2018年管家婆彩图