How to Abort Fetch Request in JavaScript Quickly and Easily

You can abort a fetch request in JavaScript by using the AbortController API. Create an AbortController instance, pass its signal to the fetch call, and call abort() on the controller to cancel the request.

Syntax

The AbortController creates a controller object that lets you abort one or more fetch requests. You pass its signal property to the fetch options. Calling abort() on the controller cancels the fetch.

• const controller = new AbortController(); — creates the controller.
• signal: controller.signal — pass this to fetch options.
• controller.abort() — cancels the fetch request.

javascript

const controller = new AbortController();

fetch('https://example.com/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// To abort the fetch:
controller.abort();

Example

This example shows how to start a fetch request and abort it after 1 second. The fetch will be canceled, and the catch block will handle the abort error.

javascript

const controller = new AbortController();

fetch('https://jsonplaceholder.typicode.com/posts', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log('Data received:', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch request was aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// Abort the fetch after 1 second
setTimeout(() => {
  controller.abort();
}, 1000);

Output

Fetch request was aborted

Common Pitfalls

Common mistakes when aborting fetch requests include:

• Not passing the signal from AbortController to the fetch options, so aborting has no effect.
• Not handling the AbortError in the catch block, which can cause confusion.
• Calling abort() too late, after the fetch already completed.

Always check for error.name === 'AbortError' to detect aborted fetches.

javascript

/* Wrong way: no signal passed, abort does nothing */
const controller = new AbortController();
fetch('https://jsonplaceholder.typicode.com/posts')
  .catch(error => console.log('Error:', error));
controller.abort(); // This won't abort the fetch

/* Right way: pass signal and handle abort */
const controller2 = new AbortController();
fetch('https://jsonplaceholder.typicode.com/posts', { signal: controller2.signal })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted correctly');
    }
  });
controller2.abort();

Output

Fetch aborted correctly

Quick Reference

Summary tips for aborting fetch requests:

• Create an AbortController instance.
• Pass controller.signal to fetch options.
• Call controller.abort() to cancel the request.
• Handle AbortError in the catch block.
• Use abort to improve user experience by canceling unnecessary requests.

Key Takeaways

Use AbortController and its signal to enable aborting fetch requests.

Always handle the AbortError in the catch block to detect aborted fetches.

Pass the signal option to fetch; otherwise, aborting won't work.

Call abort() on the controller to cancel the fetch request anytime.

Aborting fetch improves app responsiveness by stopping unwanted network calls.