Recently had the need to cancel an http request and after googling a bit I did get the solution I needed. However, the solution I got was not in the context of an example, so had to do some thinking myself and I put two and two together to finally make it suit my use case. I think it would be appropriate to input reference links to some sites that helped me in getting to the needed solution, so would do that along the way
Why even cancel a request? When could this be needed?
I am sure there are many use cases, but I find myself needing it currently when I am trying to send an input value to an api endpoint to get a response.
Take for example, signing up to a platform that requests you enter a username. Most times whichever username you select needs to be unique, so you can imagine at intelligent intervals, with the use of debounce(What is Debounce?), a request would be made to the backend to see if that particular username is available or not. From the screenshot below, you can see that Google even uses this technique when a user is trying to select a username for their Gmail account.
NOTE: If you are able to somehow have a "lightning fast" server response for requests made to your backend, you might never need to do this
Like I said earlier on, I am writing this article to show this feature in a live example. However, I wouldn't want to waste too much time on things that don't pertain to the feature.
So what now?
I have set up a simple UI, with some basic html and bootstrap CDN to get the css. I would leave the link to the completed github repository so you can see the entire code.
Now, if you want to, you can implement the cancellation functionality from the scratch. However, the axios library already has built in functionality for this, so instead of reinventing the wheel we would just go ahead with axios.
Since this article focuses on the front-end side, we’ll just use a public API I got from this article Debouncing in React.js.
API Endpoint — (api.punkapi.com/v2/beers)
Query Parameter — beer_name(String)
API Documentation — (punkapi.com/documentation/v2)
I would set up the whole debounce functionality and hit this endpoint then get back to the main point of this article.
Now with our debounce functionality in place and currently hitting our desired endpint just as we want to, our file should look like this.
Now, to implement this we would take just 4 simple steps:
- Create a variable outside our request scope, that would hold a reference to the current request and initialize it to null.
- When a request is fired, assign that request to our created variable.
- Create a check to see if our variable has a valid assigned value. If it does access the value and cancel the request, if it doesn't proceed further.
- Add the request to the axios cancel token.
With those four steps, you are good to go. This can be easily implemented in any framework of your choice by just following the four core concepts of this feature mentioned above.
Well, there you have it.
Full code : github.com/obododavid/cancel-network-request
Live demo: obododavid.github.io/cancel-network-request
Remember to open your dev tools to see the cancellation in action 😅