节制搜索频率,避免高频率请求

-> 以下内容都是在 vue-cli 项目结构下的单文件组件进行的

<template>
    <input v-model="param" @input="getResult">

    <ul>
        <li v-for="item in list">{{item.name}}</li>
    </ul>
</template>>

data () {
    return {
        param: ``,
        list: []
    }
},
methods: {
    // 首先定义请求数据方法
    getResult () {
        let url = `/api/search?code=${this.param}`
        axios.get(url).then(res => {
            if (res.data.code === `200`) {
                this.list = res.data.data
            }
        })
    },
    // 主要节制方法
    // 这里有一点要注意,debounce传入的第一个函数不要使用箭头函数
    // 如果使用了箭头函数的话 this 的指向就改变了
    debounceGetResult: _.debounce传入的第一个函数不要使用箭头函数(function () {
        this.getResult()
    // 500是多长时间后请求
    }, 500)
},
watch: {
    // 只要搜索内容发生变化,就调用请求接口
    param (param) {
        this.getResult()
    }
}

上面还有一个点是_.debounce,这个是lodash库的 api 如果有支持 es6的话可以在组件顶部直接引入

npm install lodash -save
...
import _ from 'lodash'

没有组件化的情况下直接通过script 标签引入即可

<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

还有不懂的可以按照官网示例来写