关于查询功能的优化方案

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

一个用来查询的文本框，和一个查询按钮，搭配一个接口，组成了再基础不过的查询功能。那么，在查询上上面还有哪些点可以进行优化，接下来来看看都有哪些方案（后续可能进行补充）

1. 防抖节流 关于前端性能优化中，防抖节流是在代码优化层面上经常被提及的方式。模糊搜索的优化也是防抖节流的使用场景之一。

2. 禁用按钮 这种方案是使用按钮的禁用属性或者框架中组件的 disable 属性来完成，当接口还在请求中的状态，为按钮添加禁用状态（有些场景可能使用 loading 加载状态更好）

3. 每次查询时，取消上次的接口请求

如何取消上次的接口请求

在 Axios 中我们可以使用cancel token来取消请求，在前文中有具体介绍： Axios 如何取消请求

原始想法，除了第一次不执行取消，其它时间都执行，但是当接口执行完毕后非第一次查询都会重复执行取消操作，所以在这里改为 cancel 类型的判断

• cancel 初始化为空，所以第一次查询不会执行取消操作
• 在接口调用完成后将 cancel 设为 null （成功失败其实都属于执行完毕，所以可以放在finally 中执行）
• 如果 cancel 是 function 类型，则执行取消操作 cancel()
• 否则不执行

代码实现

完整代码如下：

<template>
  <div class="hello">
    <input v-model="text" />
    <button @click="search">搜索</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'Search',
  data() {
    return {
      text: '',
      cancel: null
    }
  },
  methods: {
    search() {
      if(typeof this.cancel === 'function') {
        this.cancel();
      }
      let CancelToken = axios.CancelToken
      axios.get('https://api/.../search', {
        params: {
          query: this.text
        },
        cancelToken: new CancelToken( c => {
          this.cancel = c;
        })
      }).then( res => {
        console.log(res)
        this.cancel = null
      }).catch( err => {
        console.log(err)
      })
    }
  }
}
</script>

运行代码，在下图可以看到，第一次点击后正常发送请求，连续点击后，接口状态变为 canceled，执行完毕后再重新请求，请求成功。