Vue实时搜索并减少请求量实现

1. 项目需求

前不久公司项目有个需求是要实现搜索框实时搜索，本来是监听手机键盘回车（@keyup , event.keyCode==13），但是客户算是比较年纪大的，喜欢用按钮点击搜索，但是项目是APP，我们设计师不妥协加按钮，最终协商要求做一个实时检索的功能。

2. 实现思路

以前刚接触Vue的时候知道 VUE 有个监听input 的方法@input，但是这个方法是如果用这个方法进行监听请求的话可能会消耗比较多的请求资源，
于是就想到设置定时器减少请求。

3.代码

直接上代码，由于之前已经做了监听回车的功能，最后觉得沿用代码，实现实时搜索+回车搜索

html

<input @keyup="search"  />

js

export default {
        data() {
            return {
                inputTimeStamp: 0,//标记当前事件函数的时间戳
            }
        },
        created(){
        },
        methods: {
          
            /**
             * des:用户在输入状态下不发送请求，等停止输入后发送请求
             */
            search(event){
                if(event.keyCode !== 13){//除回车键外
                    //标记当前事件函数的时间戳
                    this.inputTimeStamp= event.timeStamp;
                    setTimeout(() => {
                        //1s后比较二者是否还相同（因为只要还有事件触发，inputTimeStamp就会被改写，不再是当前事件函数的时间戳）
                        if(this.inputTimeStamp== event.timeStamp){
                            console.log('发送请求');
                        }
                    }, 1000);
                }else{

					console.log('发送请求');
				}

            },
        },
    }

请求渲染问题

由于多次请求，服务器返回的速度不同可能会导致渲染错误问题
所以需要把前面请求终止掉，以最后一次请求为准，这里就需要调用一些方法

ajax 的abort()

var req;
if(req !=null) req.abort();
req = $.ajax({ ... });

axios

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

参考链接

http://www.cnblogs.com/mingxinice/p/keyupSearch.html
https://segmentfault.com/a/1190000016963943