Cancel Axios Previous Calls

I’m building a multi-page web application but I use Vue js in some pages to build components and enhancing user experience.

I have a situation that after submitting a form I have to redirect to one of the pages built with Vue js which lists all the articles and I had to filter them to get the one I had just created.

so I decided to pass the id in the query string and get it from the query string in the filter component and set the filter that filters articles by id with it

the problem is that when I opened the network tab I found the API called two times. one when the component mounted and the other one when filter params changed.

in addition, I have no clue that the second Axios call (filter one) will return after the first call (mounted hook one) so the result will depend on the Axios call that returns last.

so I had to figure a way to cancel all previous calls

Image for post
Image for post

enough talking :)
I built a utility js file I hope it can help someone in a similar situation and I wanted to share the code with you built on top of Axios cancellation support

export const axiosCallOnce = {

then I had to change the default Axios call axios.get() to axiosCallOnce.get()

Image for post
Image for post

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store