AbortController and Request Cancellation in JavaScript: Javascript Guide (2026)

AbortController and Request Cancellation in JavaScript

Advanced Topic 15 of 15

In modern web applications, it is sometimes necessary to cancel an ongoing request. For example, a user may navigate away from a page before an API request finishes, or a search request may need to be cancelled when the user types a new query. JavaScript provides a built-in mechanism called AbortController to handle such situations.

AbortController allows developers to cancel asynchronous operations such as network requests made using the Fetch API. This helps improve performance and prevents unnecessary processing.

What is AbortController?

AbortController is a JavaScript interface that allows developers to cancel web requests or other asynchronous operations. It works together with a signal that tells the request when it should be stopped.

Key Point: AbortController allows developers to cancel ongoing asynchronous operations like API requests.

Creating an AbortController

To use AbortController, developers first create a controller object. This controller generates a signal that can be attached to a request.

javascript const controller = new AbortController(); const signal = controller.signal;

Output

An AbortController object is created along with its signal.

Using AbortController with Fetch

The signal from the controller can be passed to the Fetch API to allow cancellation of the request.

javascript const controller = new AbortController(); fetch("https://jsonplaceholder.typicode.com/posts", { signal: controller.signal }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error));

Output

The API request returns data unless it is aborted.

Cancelling a Request

To cancel an ongoing request, the abort() method is called on the controller.

javascript const controller = new AbortController(); fetch("https://jsonplaceholder.typicode.com/posts", { signal: controller.signal }); controller.abort();

Output

The request is cancelled before completion.

Key Point: Calling controller.abort() immediately cancels the associated request.

Handling Aborted Requests

When a request is aborted, JavaScript throws an error that can be handled using catch().

javascript const controller = new AbortController(); fetch("https://jsonplaceholder.typicode.com/posts", { signal: controller.signal }) .catch(error => { if(error.name === "AbortError"){ console.log("Request was cancelled"); } });

Output

Request was cancelled

Common Use Cases

Cancelling API requests when users navigate away
Stopping search requests when a user types new input
Preventing unnecessary network traffic
Improving performance in dynamic applications

Key Point: Request cancellation helps optimize performance in applications that perform frequent network requests.

Conclusion

AbortController provides a simple and effective way to cancel asynchronous operations such as API requests in JavaScript. By using AbortController with the Fetch API, developers can prevent unnecessary processing and improve application performance.

Understanding request cancellation is important for building responsive and efficient web applications.

In the next tutorial, you will learn about the Fetch API in JavaScript, which allows developers to retrieve and send data using HTTP requests.

JavaScript Fetch API

Full Stack Java Development

Python Training

📑 Table of Contents

🎓 Want Live Training?

What is AbortController?

Creating an AbortController

Using AbortController with Fetch

Cancelling a Request

Handling Aborted Requests

Common Use Cases

Conclusion

Get Newsletter

CONTACT

COMPANY

PROGRAMS

TRENDING COURSES