It’s All About Aborting/Cancelling API Request.

Arda Keyişoğlu

Published in

Neredekaltech

4 min readDec 16, 2022

In this article, you will find;

Why should we cancel a Request?
What is Cancellation Token?
Cancel a request while using the Fetch
Cancel a request while using Axios
Cancel a request with Search bar

Why should we cancel a Request?

Cancellation can help you stop long-running requests while using resources in situations like a user trying to close and refresh the web page or don’t like the word that user searching for and want to change it. Canceling a request will boost your web page’s performance and it will reduce the load on your server.

When developing with React.js and updating the state inside of components, you may have come across the following warning:

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

When this error occurs for various reasons, one common cause for it, is attempting to update the state within the callback of a network request after the component has been destroyed.

What is Cancellation Token?

A Cancellation Token enables cooperative cancellation between threads, thread pool work items, or task objects. Using a Cancellation Token can help you stop long running request from using resources when a user cancels a request in the web browser.

Whether you’re doing an async work or not, accepting a Cancellation Token as a parameter to your method is a great way to allow your caller to express lost interest in the result. Supporting cancellable operations will bring extra responsibility on your part but it definitely worth it.

Cancel a request while using the Fetch

If you want to cancel a Fetch request, you need to use the AbortController.

You can use the constructor to create a new AbortController object. It has a read-only property AbortController.signal, which is an AbortSignal object instance, which can be used to communicate with or to abort a request. It also has a method AbortController.abort() which aborts the fetch requests, consumption of any response bodies, and streams.

In the sample code below, I’ve created my fetchController. After sending the request, if there is no response within half a second after sending a request, it will automatically cancel the request.

Below, you can see the cancelled requests.

Cancel a request while using Axios

Axios was using Cancel Token since v0.22.0, but now it supports AbortController to cancel requests. You can check the documentation.

So, if we want to cancel an axios request, we need to use the AbortController. This is quite same as fetch operation. First, create a new AbortController object, then design your system and call the AbortController.abort() function.

This one will give the same request cancellation output if request is not fulfilled within half a second.

Below, you can see the cancelled request.

cancelled axios request

Cancel a request with Search bar

In this part, I will show you “storing a reference to the Axios call in a variable” and cancelling whenever a new request is triggered. Basically, We will cancel the previous request.

You can use 1–2 seconds of timeOut functions to handle multiple search bar requests either, but I want to show you another example.

We need a search bar using an input element. An onChange handler for the input element called handleSearchChange which will be triggered every time when we enter a text on the search bar. And finally, we are calling the API using Axios by passing the search term.

Now if we try searching for “123” we will see that three different calls made and all three responses are logged. We really don’t need the previous two responses, which we can cancel when the next request is made.