title: Search with axios: cancel previous request when new character
body: <p>I have a searchbar, the results are updated on each letter, but when the user types 3 letters quickly for example, the previous requests are not cancelled so there is a ugly delay before he get his results.</p>
  
  <p>I have read this <a href="https://github.com/axios/axios#cancellation" rel="noreferrer">https://github.com/axios/axios#cancellation</a> and maybe I am a bit tired but I struggle very much adding it in my project. It is almost doing the opposite effect, it now takes forever.
  Do you have any suggetsion or maybe do you recommend a good tutorial so that I could understand this?</p>
  
  <pre><code>&lt;input v-model="query" type="text" class="form-control" placeholder="Runner name or description"
                     aria-label="Runner name or description"
                     aria-describedby="basic-addon2"&gt;
  
  
  watch: {
              query: {
                  handler: _.debounce(function () {
                      this.newSearch()
                  }, 100)
              }
          },
  methods: {
              searchItems() {
                  let filters = {
                      q: this.query
                  };
  
                  const CancelToken = axios.CancelToken;
                  const source = CancelToken.source();
  
                  axios.post('/Items/find', filters, {
                      cancelToken: source.token
                  })
                  .catch(function(thrown) {
                      if (axios.isCancel(thrown)) {
                          console.log('Request canceled', thrown.message);
                      }
                  })
                  .then(
                      response =&gt; {
                          if(this.Items!=null){
                              response.data.forEach(element =&gt; {
                                  this.Items.push(element);
                              });
                          }
                          else
                              this.Items=response.data;
                      }
                  );
              },
              newSearch(){
                  const CancelToken = axios.CancelToken;
                  const source = CancelToken.source();
                  source.cancel('Cancel previous request');
  
                  this.countItems();
                  this.searchItems();
              },
              showMore(){
                  this.startindex = this.startindex+this.nbrows;
                  this.searchItems();
              },
              countItems(){
                  this.countItems=10;
                  let filters = {
                      q: this.query
                  };
                  axios.post('/Items/count', filters).then(
                      response =&gt; {
                          this.countItems=response.data;
                      }
                  );
              }
          }
  </code></pre>