The ability to abort ongoing network requests is essential for creating responsive and efficient web applications. In JavaScript, the AbortController interface provides a powerful mechanism to cancel fetch requests. This article delves into using AbortController to manage fetch requests, offering detailed explanations and practical examples to enhance your understanding. To find out more about fetch, refer to our previous page, Fetch API.

Introduction to AbortController

AbortController is part of the Fetch API and allows you to abort one or more fetch requests. By integrating AbortController into your fetch requests, you can control the timing of these requests, ensuring they do not continue unnecessarily and waste resources.

Basic Usage of AbortController

To abort a fetch request, you first create an instance of AbortController and then pass its signal property to the fetch request. Here is a basic example:

const controller = new AbortController(); const signal = controller.signal; fetch('', { signal }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => { if ( === 'AbortError') { console.log('Fetch request was aborted'); } else { console.error('Fetch error:', error); } }); // Abort the request controller.abort();

In this example, we create an AbortController instance and pass its signal to the fetch request. By calling controller.abort(), we can abort the fetch request.

Practical Example: Aborting a Fetch Request on User Action

AbortController is particularly useful for aborting fetch requests based on user interactions. Consider a scenario where a user can cancel a data fetch operation by clicking a button:

  <button id="abortButton">Abort Fetch Request</button>
    const controller = new AbortController();
    const signal = controller.signal;
    document.getElementById('abortButton').addEventListener('click', () => {
    fetch('', { signal })
      .then(response => response.json())
      .then(data => alert(
        'Data is successfully fetched! Refresh the page and try aborting.'
      .catch(error => {
        if ( === 'AbortError') {
          alert('Fetch request was aborted by the user');
        } else {
          alert('Fetch error: ' + error.message);

In this example, clicking the button with the ID abortButton will abort the ongoing fetch request. We used a dummy endpoint which takes 5 seconds to complete the request. If you click the button before 5 seconds, you will abort the request.

Handling Multiple Fetch Requests with AbortController

AbortController can manage multiple fetch requests simultaneously. You can use the same controller for several fetch requests and abort them all at once:

If you are using the AbortController, always remember to handle the AbortError appropriately and perform any necessary cleanup.
const controller = new AbortController(); const signal = controller.signal; const fetchPromises = [ fetch('', { signal }), fetch('', { signal }), fetch('', { signal }), ]; Promise.all(fetchPromises) .then(responses => Promise.all( => response.json()))) .then(data => console.log(data)) .catch(error => { if ( === 'AbortError') { console.log('Fetch requests were aborted'); } else { console.error('Fetch error:', error); } }); // Abort all fetch requests controller.abort();

In this scenario, the controller.abort() method aborts all fetch requests associated with the same signal.

Advanced Usage of AbortController

Combining AbortController with Other Async Operations

AbortController can also be combined with other asynchronous operations. For instance, you might want to abort a fetch request when a certain condition is met within an asynchronous workflow:

const controller = new AbortController(); const signal = controller.signal; async function fetchData() { try { const response = await fetch('', { signal }); const data = await response.json(); console.log(data); } catch (error) { if ( === 'AbortError') { console.log('Fetch request was aborted'); } else { console.error('Fetch error:', error); } } } async function otherAsyncOperation() { // Some other async operation that might trigger the abort setTimeout(() => { controller.abort(); console.log('Abort triggered by other async operation'); }, 1000); } fetchData(); otherAsyncOperation();

In this example, the fetch request is aborted by another asynchronous operation after a specified timeout. The API we called via fetch is a dummy endpoint that takes 5 seconds to respond, and we set a timeout to abort the request in one second.


AbortController is a powerful tool for managing fetch requests in JavaScript. By understanding and utilizing AbortController, you can create more responsive and efficient web applications. We have explored various practical applications, from user-triggered aborts to implementing request timeouts and handling multiple fetch requests simultaneously. With these techniques, you can enhance the performance and user experience of your web applications.

Practice Your Knowledge

What is the purpose of passing the signal property from an AbortController to a fetch request?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?