AbortController for cancellation in Node.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an AbortController aborts a fetch?

Consider this Node.js code using AbortController to cancel a fetch request. What is the output or behavior when the controller aborts the fetch?

Node.js

import fetch from 'node-fetch';
const controller = new AbortController();
const signal = controller.signal;

fetch('https://httpbin.org/delay/5', { signal })
  .then(() => console.log('Fetch succeeded'))
  .catch(err => console.log(err.name));

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

A Logs 'AbortError' after about 1 second

B Logs 'Fetch succeeded' after 5 seconds

C Throws a SyntaxError immediately

D Logs 'TypeError' after 1 second

💡 Hint

Think about what happens when the abort signal triggers during a fetch.

When the AbortController aborts, the fetch promise rejects with an error named 'AbortError'. This happens shortly after abort() is called, not after the full delay.

📝 Syntax

intermediate

Which option correctly creates an AbortController and uses its signal in fetch?

Select the code snippet that correctly creates an AbortController and passes its signal to fetch in Node.js.

A const controller = AbortController(); fetch(url, { signal: controller.signal });

B const controller = new AbortController(); fetch(url, { signal: controller.signal });

C const controller = new AbortController; fetch(url, { signal: controller });

D const controller = new AbortController(); fetch(url, { signal: controller });

💡 Hint

Remember how to instantiate classes and what fetch expects for the signal option.

Option B correctly creates an AbortController instance and passes its signal property to fetch. Option B misses 'new', C passes the controller itself instead of its signal, and D also passes the controller instead of the signal.

🔧 Debug

advanced

Why does this fetch never abort despite calling controller.abort()?

Look at this code snippet. The fetch request never aborts even though controller.abort() is called. What is the reason?

Node.js

import fetch from 'node-fetch';
const controller = new AbortController();

fetch('https://httpbin.org/delay/5')
  .then(() => console.log('Done'))
  .catch(err => console.log(err.name));

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

A The fetch call does not use the controller.signal, so abort has no effect

B AbortController is not supported in Node.js

C controller.abort() is called too late to affect fetch

D fetch automatically ignores abort signals

💡 Hint

Check if the fetch call is connected to the AbortController signal.

The fetch call must receive the signal option from the AbortController to be abortable. Here, fetch is called without the signal, so aborting the controller does nothing.

❓ state_output

advanced

What is the state of AbortController.signal.aborted after calling abort()?

Given this code, what is the value of signal.aborted after controller.abort() is called?

Node.js

const controller = new AbortController();
const signal = controller.signal;
console.log(signal.aborted);
controller.abort();
console.log(signal.aborted);

A true then true

B true then false

C false then false

D false then true

💡 Hint

Check the initial and post-abort values of the aborted property.

Initially, signal.aborted is false. After calling controller.abort(), it becomes true indicating the signal is aborted.

🧠 Conceptual

expert

Why use AbortController with fetch in Node.js?

Which is the main reason to use AbortController with fetch in Node.js?

A To convert fetch responses into streams

B To automatically retry failed fetch requests

C To cancel an ongoing fetch request to save resources or respond to user actions

D To increase fetch request timeout beyond default limits

💡 Hint

Think about what aborting a fetch achieves.

AbortController allows canceling a fetch request before it completes, useful for stopping slow or unwanted requests, saving bandwidth and CPU.

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