直接上源码：

    1. <template>
    2.   <div>
    3.     <Input v-model="inputVal" placeholder="Enter something..." @keyup.native="inputChange" />
    4.   </div>
    5. </template>
    7. <script>
    8.   import axios from 'axios'
    10.   export default {
    11.     computed: {
    12.       ...mapGetters(['stateCount',  'stateCategoryList'])
    13.     },
    14.     data () {
    15.       return {
    16.         inputVal: '',
    17.         cancel: null,
    18.         timer: 0,
    19.       }
    20.     },
    21.     methods: {
    22.       inputChange() {
    23.         if(this.timer){
    24.           clearTimeout(this.timer);
    25.         }
    26.         if(this.inputVal){
    27.           this.timer = setTimeout(() => {
    28.             this.remoteSearch(this.inputVal)
    29.           }, 300)
    30.         }else{
    31.           // 输入框中的内容被删为空时触发，此时会清除之前展示的搜索结果
    32.           this.remoteSearch(this.inputVal)
    33.         }
    34.       },
    35.       // 监听输入框所触发的实时搜索组件用于向后端请求的方法
    36.       // GET方式
    37.       /*remoteSearch(keyword) {
    38.         // 如果存在上一次请求，则取消上一次请求
    39.         if(this.cancel){
    40.           this.cancel('Cancel last request');
    41.         }
    43.         // 定义CancelToken，它是axios的一个属性，且是一个构造函数
    44.         let CancelToken = axios.CancelToken;
    46.         // 使用axios的get方法获取请求结果，在请求时需要传入cancelToken参数，
    47.         // 实例化一个CancelToken，实例化后会生成一个类似于id的请求令牌，将它赋值给全局的cancel变量。
    48.         axios.get('/api/aaaa', {
    49.           params: { name: keyword },
    50.           cancelToken: new CancelToken((c) => {
    51.             this.cancel = c;
    52.           })
    53.         }).then((res) => {
    54.           // 将请求的结果赋值给personData全局变量，用于展示搜索结果
    55.           console.log(res, 'res')
    56.         })
    57.       }*/
    59.       // POST方式
    60.       remoteSearch(keyword) {
    61.         // 如果存在上一次请求，则取消上一次请求
    62.         if(this.cancel){
    63.           this.cancel('Cancel last request');
    64.         }
    66.         axios.post('/api/aaaa', {kw:keyword}, {
    67.           headers: {
    68.             'Content-Type': 'application/x-www-form-urlencoded',
    69.             'Accept': 'application/json'
    70.           },
    71.           cancelToken: new axios.CancelToken((c) => {
    72.           // An executor function receives a cancel function as a parameter
    73.             this.cancel = c;
    74.           })
    75.         }).then((res) => {
    76.           // 在这里处理得到的数据
    77.           console.log(res, 'res')
    78.         }).catch((err) => {
    79.           if (axios.isCancel(err)) {
    80.             console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
    81.           } else {
    82.             //handle error
    83.             console.log(err);
    84.           }
    85.         })
    86.       },
    87.     }
    88.   }
    89. </script>