AbortController with Fetch

mdiffshashank

Shashank Trivedi

Posted on September 11, 2024

AbortController with Fetch

The AbortController in JavaScript is a utility used to cancel or abort asynchronous operations, such as fetch requests or other tasks like event listeners, that can take time to complete. It allows you to stop an operation that is no longer needed, which is useful for improving performance and managing resources.

Example Use Case:

// Create an AbortController instance
const controller = new AbortController();
const signal = controller.signal;

// Start a fetch request with the signal attached
fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch request was aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

// If we need to cancel the request:
controller.abort(); // This will abort the fetch request

Enter fullscreen mode Exit fullscreen mode
  1. Controller: The AbortController creates a controller that manages the abort process.

  2. Signal: The AbortController has a signal property that you can pass to functions like fetch(). This signal is used to communicate when the operation should be aborted.

  3. abort() Method: When you call the abort() method, it triggers the signal and cancels the operation.

💖 💪 🙅 🚩
mdiffshashank
Shashank Trivedi

Posted on September 11, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related