vue axios.CancelToken同一接口请求频繁时取消上一次请求

vue axios.CancelToken同一接口请求频繁时取消上一次请求

问题：后台列表页面多条件查询列表数据时，同一接口由于多条件查询，请求参数不同，后台处理的结果时间不同，连续频繁变换不同的参数发起请求时会出现第一次发起的请求后获取响应的结果时间比第二次发起的慢，造成先发起的请求数据覆盖后发起的请求，页面渲染时出现查询条件与查询结果不符的问题，所以重新触发请求时，取消上一次已发送但还未返回结果的请求，可以避免出现上面的bug

<template>
  <div>
    <button @click="sendData">发送ajax</button>
    <button @click="cancelData">取消ajax</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
    
      cancel: null
    }
  },
  methods: {
    sendData() {
      let CancelToken = this.$axios.CancelToken
      this.cancelData();
      let self = this
      this.$axios
        .get('http://jsonplaceholder.typicode.com/comments', {
   //     params: {     //请求参数
   //       searchKey: that.searchKey,
   //       searchType: that.se