vue + axios项目，重复请求，在上一次请求还没返回结果的情况下，把上一次请求取消掉

1. 业务场景：页面搜索功能，输入框边输入边搜索，点击键盘上的回车也可以搜索，当边输入边搜索结果还处于loading状态时，又去点击回车，会再次发送请求，并返回2条一模一样的数据。
2. 预期效果：只需要返回1条数据。
3. 解决办法：axios官方文档有cancelToken属性可以取消。
4. 项目情况

• 这是项目中统一封装的axios请求request.js，自行添加一个cancelToken属性。只贴出部分代码，省略中间的响应、拦截封装。

import axios from 'axios'
const service = axios.create({
  timeout: null, // 请求超时时间 
}) 
service.cancelToken = axios.CancelToken 
 
// 省略中间代码...

export default service

• 项目中统一管理的api列表

import request from '@/utils/request'
let CancelToken = request.cancelToken

// 全局搜索人员接口
export function queryAllpeople(data, _this) {
  return request({
    url: `/tbrms/userinfo/query `,
    method: 'post',
    data,
    cancelToken: new CancelToken(function executor(c) {
      _this.cancelRequestFn = c
    })
  })
}

*具体使用该功能的组件

data() {
    return {
      icancelRequestFn: null, // 取消请求的方法
     }          
}

 methods: {
    searchPerson() {  // 搜索的方法
      if (typeof this.cancelRequestFn === 'function') {
        this.cancelRequestFn(); // 取消请求
      }

      let params = {
         // 省略传参的参数...
      };
        
      // 把当前this传过去
      this.$api.addresslistByName(params, this).then(res => {
          // 省略代码...
      }）
}

这样，就可以达到重复请求的时候，取消上一次未返回结果的请求的目的。