title: Cancel previous promise
body: <p>I am implementing a search input in my React app which may take several seconds for a response from  the server based on the size of the result set. The issue I am having right now is if the user searches for a term which has a large result set and then searches for a term with a small result set straight after, the first search is returning after the last search and is overwriting the data, therefore displaying incorrect results on the table.</p>
  
  <p>Currently I have a search component which calls an async function in its parent (this function can be called from several child components, Search being one of them). Inside the async function I have an await call to the service with the search query. Once that returns the results are passed to a function which updates some state.</p>
  
  <p>I have read about cancel tokens but i'm not totally sure how to implement this. When the search component makes the initial call, there will be a promise which will be pending until the result is received. When I search again, how would I be able to ignore the result of the first promise? Each time I search, would I store the promise in a field of the component and somehow check this field in future searches? </p>
  
  <p>I read many possible solutions to this online. I am using <code>fetch-retry</code> to handle the API call and would rather not use a library such as <code>bluebird</code> or <code>axios</code>. The main part I don't understand is how to have my promise not resolve if a promise has been created in future.</p>
  
  <p>Hope I explained this well enough!</p>
  
  <p>Thanks</p>