Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 8, 2020 01:45 pm GMT

How to Abort a Fetch Request in JavaScript using AbortController

Sometimes it's necessary to abort a fetch request. In this post, we explore how to quickly do so using AbortController!

If you enjoy this tutorial, please give it a , , or and consider:

signing up for my free weekly dev newsletter
subscribing to my free YouTube dev channel

A Simple Fetch Request

Let's start out with a simple fetch request. We'll grab some metadata about my Github account and log it to the console.

fetch('https://api.github.com/users/nas5w')  .then(res => res.json())  .then(data => {    console.log(data);  });
Enter fullscreen mode Exit fullscreen mode

If we check our console, we see a json object describing my account has been logged. Here's a bit of that data.

{"login":"nas5w","id":7538045,"node_id":"MDQ6VXNlcjc1MzgwNDU=","avatar_url":"https://avatars2.githubusercontent.com/u/7538045?v=4","gravatar_id":"","url":"https://api.github.com/users/nas5w","html_url":"https://github.com/nas5w"...}
Enter fullscreen mode Exit fullscreen mode

Using AbortController

In this same scenario, we can create a new instance of the AbortController object and pass fetch a reference to the AbortController instance's signal object.

Here's what I mean:

const controller = new AbortController();const signal = controller.signal;fetch('https://api.github.com/users/nas5w', { signal })  .then(res => res.json())  .then(data => {    console.log(data);  });
Enter fullscreen mode Exit fullscreen mode

So now, fetch has a reference to the signal object on our controller instance. We can abort our fetch by calling abort on our controller:

const controller = new AbortController();const signal = controller.signal;fetch('https://api.github.com/users/nas5w', { signal })  .then(res => res.json())  .then(data => {    console.log(data);  });controller.abort();
Enter fullscreen mode Exit fullscreen mode

If we run this, we no longer log the returned data because we have immediately aborted our fetch request!

Handling the Cancellation

You may have noticed in our last code snippet that our fetch request isn't gracefully aborted, we actually see an error in our console:

Uncaught (in promise) DOMException: The user aborted a request.
Enter fullscreen mode Exit fullscreen mode

In order to handle this cancellation error, we simply need to catch our error:

const controller = new AbortController();const signal = controller.signal;fetch('https://api.github.com/users/nas5w', { signal })  .then(res => res.json())  .then(data => {    console.log(data);  })  .catch(err => {    console.log(err);  });controller.abort();
Enter fullscreen mode Exit fullscreen mode

Now if we run our code we see that we gracefully log our error:

DOMException: The user aborted a request.
Enter fullscreen mode Exit fullscreen mode

So now we have successfully aborted our fetch request and caught the associated error.

A Note on Browser Compatibility

Most modern browsers have full support for AbortController but (of course) if you have to support IE you're out of luck! Be sure to check out the associated MDN docs for full compatibility info.

If you enjoy this tutorial, please give it a , , or and consider:

signing up for my free weekly dev newsletter
subscribing to my free YouTube dev channel


Original Link: https://dev.to/nas5w/how-to-abort-a-fetch-request-in-javascript-using-abortcontroller-3jc3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To