Thankfully, we’ve got a lot of different libraries that help us to don’t have to think a lot in xhr: jQuery or axios are probably among the top libraries to work with ajax.
But, in ES6 (ES2015) browsers introduced Fetch API (THANKS 🎉) and… we created some articles, some POCs and some small apps with fetch, but we kept using libraries on real projects.
And why? Probably because Fetch doesn’t have all the features that we need, features like interceptors or abortable requests.
But, wait, with Fetch is no so difficult to use these features.
Sometimes we need to abort a request, because we don’t want to finish it, and we don’t want to create unnecessary work for the app.
For example, we open a page that has to show to us a list of items, we create an ajax request to get all the data that we need.
But what if before having the results of this request we change the page? The request will continue until the end, but the user will never see the data.
Another example could be when the user triggers an action and before it finishes, he decides to cancel it. In some scenarios could be useful to also abort the request.