VueJs和Axios：延迟输入后触发+取消前一个答案

【问题标题】：VueJs and Axios : Trigger after input with a delay + cancel previousVueJs和Axios：延迟输入后触发+取消前一个
【发布时间】：2019-03-13 04:31:48
【问题描述】：

所以在我的网站上我有一个输入框

<SearchBox v-model="searchTerm"/>

我通过Axios观看和调用网址

watch: {
    searchTerm: function() {
      axios
      .get("https://robotic.buzz/skynet/search/" + searchTerm)
      .then(response => {
        // JSON responses are automatically parsed.
        this.results = response.data;
      })
      .catch(e => {
        this.errors.push(e);
      });
    }
  }

有没有办法延迟通话并取消之前的通话？因此，如果有人输入内容，当他们暂停 1 秒时，它会调用服务器，并且不会为他们输入的每个字母调用它。

简单的 1 秒延迟仍会使呼叫排队。

【问题讨论】：

你通常会为类似的事情使用去抖动。试试看lodashes debounce函数，你可以download from npm
看起来不错的解决方案你怎么不把它贴出来
另外：stackoverflow.com/questions/42199956/…
debounce 完美解决了我的问题

标签： javascript vue.js vuejs2 axios vue-component

【解决方案1】：

您可以使用lazy 修饰符，如下所示：

 <input type="text"  v-model.lazy="searchTerm" />

因此，当您离开文本字段时，您可以查看数据并致电axios

new Vue({

  el: '#app',
  data(){
  return{
  searchTerm:''
  }
  }
  ,
  watch: {
    searchTerm: function(val) {
    console.log(".")
      axios
      .get("https://robotic.buzz/skynet/search/" + val)
      .then(response => {
        // JSON responses are automatically parsed.
        console.log(response.data)
      })
      .catch(e => {
        this.errors.push(e);
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<!-- Conversations -->

<div id="app">

<input type="text"  v-model.lazy="searchTerm" />

</div>

【讨论】：