title: Axios cancel token cancelling every request
body: <p>I' trying to implement cancelToken API so that whenever i'm making a request to server to fetch results on every key stroke, only the last request should get processed, however i have implemented the axios cancel token API and it seems to cancel every request, what am i doing wrong here? This function is getting called on every key stroke.</p>
  
  <pre><code>getProductLists2 = async () =&gt; {
  
  
          let formData = new FormData()
  
          const { start, limit } = this.state
  
          formData.append('start', start)
          formData.append('limit', limit)
  
          formData.append('product_title', this.state.searchTitle)
          formData.append('product_sku', this.state.searchSKU)
  
          let cancel;
  
          Axios({
              method: 'POST',
              url: BASE_URL + '/listProduct',
              // headers: { 'Content-Type': 'multipart/form-data' },
              data: formData,
              cancelToken: new Axios.CancelToken(c =&gt; cancel = c)
          })
              .then(products =&gt; {
                  if (products &amp;&amp; products.data.productList &amp;&amp; products.data.productList.length &gt; 0) {
                      this.setState({ productList: products.data.productList, totalProducts: products.data.productTotal })
                  }
              })
              .catch(err =&gt; toast.error('Something went wrong'))
          console.log(cancel, 'h')
          cancel &amp;&amp; cancel()
      }
  </code></pre>