Create an abortable API using AbortController and AbortSignal

Recently I worked on a project that required me to build a typeahead search UI component. The most important feature of this search component is that it should allow the user to abort an unfinished search request at any time. If the search request is an HTTP request to the server to get the search results, I could have used the fetch API with AbortController to achieve this. However, there is not an HTTP endpoint to use. Instead, I get a wrapped API service.

As a result, I needed to create a custom abortable API for the available API service. I wrote two versions of the abortable API, but only one of them worked correctly. I will show the version with issues first and then the fixed version.

Then I can use the abortable API inside a redux action creator.

Everything seemed correct, so I thought cancelling a search was under control. However, after I triggered the abort search event, the search request continued and I got the…