Aborting and intercepting requests using fetch API

Probably an ajax request is one of the things that we must do when we are developing website applications. But we had a complex API during years.

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.

Aborting requests

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.