AbortController for cancellation in Node.js

Introduction

AbortController helps you stop a task that is running, like a network request, when you no longer need it. This saves time and resources.

You want to cancel a fetch request if the user navigates away from the page.

You want to stop a long-running operation if it takes too long.

You want to clean up resources when a task is no longer needed.

You want to handle user actions like cancel buttons that stop ongoing tasks.

Syntax

Node.js

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

// Pass signal to an async operation like fetch
fetch(url, { signal })
  .then(response => { /* handle response */ })
  .catch(error => {
    if (error.name === 'AbortError') {
      // Handle cancellation
    }
  });

// To cancel the operation
controller.abort();

The signal is passed to the async operation to listen for cancellation.

Calling controller.abort() triggers the cancellation.

Examples

This example fetches data but cancels the request if it takes longer than 2 seconds.

Node.js

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

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

// Cancel after 2 seconds
setTimeout(() => controller.abort(), 2000);

This async function loads data and handles cancellation gracefully.

Node.js

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

async function loadData() {
  try {
    const response = await fetch('https://example.com/api', { signal });
    const data = await response.json();
    console.log('Data loaded:', data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Loading cancelled');
    } else {
      console.error('Error:', error);
    }
  }
}

loadData();

// Cancel after 1 second
setTimeout(() => controller.abort(), 1000);

Sample Program

This program starts a fetch request to get a todo item. It cancels the fetch after 500 milliseconds. You will see the abort message if the fetch is stopped before completion.

Node.js

import fetch from 'node-fetch';

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

async function fetchWithCancel() {
  try {
    console.log('Starting fetch...');
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1', { signal });
    const data = await response.json();
    console.log('Fetch completed:', data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch was aborted');
    } else {
      console.error('Fetch error:', error);
    }
  }
}

fetchWithCancel();

// Abort the fetch after 500ms
setTimeout(() => {
  console.log('Aborting fetch...');
  controller.abort();
}, 500);

Important Notes

Always check for error.name === 'AbortError' to detect cancellation.

AbortController works well with fetch and other APIs that support signals.

Canceling tasks helps improve app performance and user experience.

Summary

AbortController lets you stop async tasks like fetch requests.

Pass the controller's signal to the task and call abort() to cancel.

Handle the abort error to respond properly when a task is cancelled.

Practice

1. What is the main purpose of AbortController in Node.js?

easy

A. To manage file system permissions

B. To create new HTTP servers

C. To cancel ongoing asynchronous operations like fetch requests

D. To handle database connections

Solution

1. Step 1: Understand AbortController's role

   AbortController is designed to stop or cancel asynchronous tasks such as fetch requests.

2. Step 2: Compare with other options

   Creating servers, managing permissions, or handling databases are unrelated to AbortController's purpose.

3. Final Answer:

   To cancel ongoing asynchronous operations like fetch requests -> Option C

4. Quick Check:

   AbortController cancels async tasks = C [OK]

Hint: AbortController is about stopping async tasks quickly [OK]

Common Mistakes:

• Confusing AbortController with server or database management
• Thinking it manages permissions
• Assuming it creates servers

2. Which of the following is the correct way to create an AbortController and get its signal?

easy

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

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

C. const controller = AbortController(); const signal = controller.abort;

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

Solution

1. Step 1: Check correct instantiation syntax

   AbortController must be created with 'new AbortController()' and its signal accessed via 'controller.signal'.

2. Step 2: Identify errors in other options

   const signal = new AbortController.signal(); wrongly calls signal as a constructor. const controller = AbortController(); const signal = controller.abort; misses 'new' and uses 'abort' instead of 'signal'. const controller = new AbortController; const signal = controller.abort(); misses parentheses on 'new AbortController()' and calls 'abort()' instead of accessing 'signal'.

3. Final Answer:

   const controller = new AbortController(); const signal = controller.signal; -> Option D

4. Quick Check:

   Use 'new' and access 'signal' property = B [OK]

Hint: Always use 'new AbortController()' and get 'signal' property [OK]

Common Mistakes:

• Forgetting 'new' keyword
• Calling 'abort' instead of accessing 'signal'
• Treating 'signal' as a constructor

3. What will be the output of this code snippet?

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

setTimeout(() => controller.abort(), 100);

signal.addEventListener('abort', () => console.log('Aborted!'));

medium

A. Logs 'Aborted!' after 100 milliseconds

B. Logs 'Aborted!' immediately

C. Throws an error immediately

D. No output, because abort is never called

Solution

1. Step 1: Understand the abort timing

   The controller.abort() is called after 100 milliseconds using setTimeout.

2. Step 2: Check event listener behavior

   The signal listens for 'abort' event and logs 'Aborted!' when triggered.

3. Final Answer:

   Logs 'Aborted!' after 100 milliseconds -> Option A

4. Quick Check:

   Abort triggers event after delay = D [OK]

Hint: Abort triggers event after delay, not immediately [OK]

Common Mistakes:

• Assuming abort happens immediately
• Expecting no output because of async delay
• Thinking it throws error instead of event

4. Identify the error in this code snippet that uses AbortController:

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

fetch('https://example.com', { signal });
controller.abort();

signal.addEventListener('abort', () => console.log('Fetch aborted'));

medium

A. Not passing the signal to fetch options

B. Calling abort() before adding the abort event listener

C. Using signal.addEventListener instead of controller.addEventListener

D. Missing async/await for fetch

Solution

1. Step 1: Check event listener timing

   The abort event listener is added after calling controller.abort(), so it misses the event.

2. Step 2: Verify other parts

   The signal is correctly passed to fetch, and signal is the right object to listen on. Async/await is optional here.

3. Final Answer:

   Calling abort() before adding the abort event listener -> Option B

4. Quick Check:

   Add event listener before abort() call = A [OK]

Hint: Add abort listener before calling abort() [OK]

Common Mistakes:

• Adding listener after abort() call
• Listening on controller instead of signal
• Forgetting to pass signal to fetch

5. You want to cancel a fetch request if it takes longer than 200ms. Which code correctly implements this using AbortController?

hard

A. const controller = new AbortController();
setTimeout(() => controller.abort(), 200);
fetch('https://api.com/data', { signal: controller.signal })
.catch(err => { if (err.name === 'AbortError') console.log('Request timed out'); });

B. const controller = new AbortController();
fetch('https://api.com/data', { signal: controller.signal });
setTimeout(() => controller.abort(), 200);
console.log('Request timed out');

C. const controller = new AbortController();
fetch('https://api.com/data');
setTimeout(() => controller.abort(), 200);
.catch(err => console.log('Request timed out'));

D. const controller = new AbortController();
setTimeout(() => controller.abort(), 200);
fetch('https://api.com/data', { signal: controller.abort() })
.catch(err => console.log('Request timed out'));

Solution

1. Step 1: Setup AbortController and timeout

   Create controller, set timeout to call abort after 200ms.

2. Step 2: Pass signal to fetch and handle abort error

   Pass controller.signal to fetch options and catch AbortError to log timeout message.

3. Step 3: Identify errors in other options

   const controller = new AbortController(); fetch('https://api.com/data', { signal: controller.signal }); setTimeout(() => controller.abort(), 200); console.log('Request timed out'); logs timeout immediately, not on abort. const controller = new AbortController(); fetch('https://api.com/data'); setTimeout(() => controller.abort(), 200); .catch(err => console.log('Request timed out')); misses passing signal. const controller = new AbortController(); setTimeout(() => controller.abort(), 200); fetch('https://api.com/data', { signal: controller.abort() }) .catch(err => console.log('Request timed out')); incorrectly calls abort() instead of passing signal.

4. Final Answer:

   const controller = new AbortController(); setTimeout(() => controller.abort(), 200); fetch('https://api.com/data', { signal: controller.signal }) .catch(err => { if (err.name === 'AbortError') console.log('Request timed out'); }); -> Option A

5. Quick Check:

   Pass signal, abort after delay, catch AbortError = A [OK]

Hint: Pass controller.signal to fetch and abort after timeout [OK]

Common Mistakes:

• Calling abort() instead of passing signal
• Logging timeout before abort happens
• Not passing signal to fetch