Q508: What is the AbortController API and how is it used? - JavaScript Internals (521 Qs)

The AbortController API provides a way to abort one or more asynchronous operations, particularly useful for canceling fetch requests.

Basic usage:

javascript

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

 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 aborted');
     }
   });

 // Cancel the request
 controller.abort();

Timeout implementation:

javascript

 function fetchWithTimeout(url, timeout = 5000) {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), timeout);

   return fetch(url, { signal: controller.signal })
     .then(response => {
       clearTimeout(timeoutId);
       return response;
     })
     .catch(err => {
       clearTimeout(timeoutId);
       if (err.name === 'AbortError') {
         throw new Error('Request timed out');
       }
       throw err;
     });
 }

 fetchWithTimeout('https://api.example.com/slow-endpoint', 3000);

Canceling multiple requests:

javascript

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

 Promise.all([
   fetch('/api/users', { signal }),
   fetch('/api/posts', { signal }),
   fetch('/api/comments', { signal })
 ]).catch(err => {
   if (err.name === 'AbortError') {
     console.log('All requests aborted');
   }
 });

 // Cancel all requests
 controller.abort();

React component example:

javascript

 useEffect(() => {
   const controller = new AbortController();

   async function fetchData() {
     try {
       const response = await fetch('/api/data', {
         signal: controller.signal
       });
       const data = await response.json();
       setData(data);
     } catch (err) {
       if (err.name !== 'AbortError') {
         setError(err);
       }
     }
   }

   fetchData();

   // Cleanup: abort on unmount
   return () => controller.abort();
 }, []);

Custom abortable operations:

javascript

 function abortablePromise(promise, signal) {
   return new Promise((resolve, reject) => {
     signal.addEventListener('abort', () => {
       reject(new DOMException('Aborted', 'AbortError'));
     });

     promise.then(resolve, reject);
   });
 }

 const controller = new AbortController();
 abortablePromise(
   new Promise(resolve => setTimeout(resolve, 5000)),
   controller.signal
 ).catch(err => console.log(err.name)); // 'AbortError'

 controller.abort();