Do You Really Know AbortController?

Many developers might think they understand AbortController, but its capabilities go far beyond the basics. From canceling fetch requests to managing event listeners and React hooks.

Do you really know how powerful AbortController is? Let's see:

Canceling fetch Requests with AbortController

Using AbortController with fetch, of course, is the most common usage.

Here’s an example demonstrating how AbortController can be used to create cancelable fetch requests:

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // Add a cancel button
  abortButton.onclick = () => controller.abort();
  try {
    const response = await fetch('/json', { signal: controller.signal });
    const data = await response.json();
    // Perform business logic here
  } catch (error) {
    const isUserAbort = error.name === 'AbortError';
    // AbortError is thrown when the request is canceled using AbortController
  }
};

The above example showcases something that was impossible before the introduction of AbortController: the ability to cancel network requests programmatically. When canceled, the browser halts the fetch, saving network bandwidth. Importantly, the cancellation doesn’t have to be user-initiated.

The controller.signal provides an AbortSignal object, enabling communication with asynchronous operations like fetch and allowing them to be canceled.

For combining multiple signals into a single signal, you can use AbortSignal.any(). Here’s how:

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const response = await fetch(url, {
    // Abort fetch if any of the signals are triggered
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    // Notify the user of cancellation
  } else if (error.name === 'TimeoutError') {
    // Notify the user of timeout
  } else {
    // Handle other errors, like network issues
    console.error(`Type: ${error.name}, Message: ${error.message}`);
  }
}

Differences Between AbortController and AbortSignal

• AbortController: Used to explicitly cancel associated signals via controller.abort().
• AbortSignal: Represents the signal object; it cannot directly cancel anything but communicates its aborted state.

For AbortSignal, You can:

• Check if it’s aborted using signal.aborted.
• Listen for the abort event:

if (signal.aborted) {
}
signal.addEventListener('abort', () => {});

When a request is canceled using AbortController, the server won’t process it or send a response, saving bandwidth and improving client-side performance by reducing concurrent connections.

Common Use Cases for AbortController

Canceling WebSocket Connections

Older APIs like WebSocket don’t natively support AbortSignal. Instead, you can implement cancellation like this:

function abortableSocket(url, signal) {
  const socket = new WebSocket(url);
  if (signal.aborted) {
    socket.close();
    // Abort immediately if already canceled
  }
  signal.addEventListener('abort', () => socket.close());
  return socket;
}

Note: If AbortSignal is already aborted, it won’t trigger the abort event, so you need to check and handle this case upfront.

Removing Event Listeners

Traditionally, removing event listeners requires passing the exact same function reference:

window.addEventListener('resize', () => doSomething());
window.removeEventListener('resize', () => doSomething()); // This won’t work

With AbortController, this becomes easier:

const controller = new AbortController();
const { signal } = controller;
window.addEventListener('resize', () => doSomething(), { signal });
// Remove the event listener by calling abort()
controller.abort();

For older browsers, consider adding a polyfill to support AbortController.

Managing Asynchronous Tasks in React Hooks

In React, effects can inadvertently run in parallel if the component updates before a previous asynchronous task completes:

function FooComponent({ something }) {
  useEffect(async () => {
    const data = await fetch(url + something);
    // Handle the data
  }, [something]);
  return ...>;
}

To avoid such issues, use AbortController to cancel previous tasks:

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // Add a cancel button
  abortButton.onclick = () => controller.abort();
  try {
    const response = await fetch('/json', { signal: controller.signal });
    const data = await response.json();
    // Perform business logic here
  } catch (error) {
    const isUserAbort = error.name === 'AbortError';
    // AbortError is thrown when the request is canceled using AbortController
  }
};

Using AbortController in Node.js

Modern Node.js includes a setTimeout implementation compatible with AbortController:

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const response = await fetch(url, {
    // Abort fetch if any of the signals are triggered
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    // Notify the user of cancellation
  } else if (error.name === 'TimeoutError') {
    // Notify the user of timeout
  } else {
    // Handle other errors, like network issues
    console.error(`Type: ${error.name}, Message: ${error.message}`);
  }
}

Unlike browser setTimeout, this implementation doesn’t accept a callback; instead, use .then() or await.

TaskController for Advanced Scheduling

Browsers are moving toward scheduler.postTask() for task prioritization, with TaskController extending AbortController. You can use it to cancel tasks and dynamically adjust their priority:

if (signal.aborted) {
}
signal.addEventListener('abort', () => {});

If priority control isn’t needed, you can simply use AbortController instead.

Conclusion

AbortController is an essential tool in modern JavaScript development, offering a standardized way to manage and cancel asynchronous tasks.

Its integration into both browser and Node.js environments highlights its versatility and importance.

If you don't know AbortController, now it’s time to embrace its full capabilities and make it a cornerstone of your asynchronous programming toolkit.

---

We are Do You Really Know AbortController?, your top choice for deploying Node.js projects to the cloud.

Do You Really Know AbortController? is the Next-Gen Serverless Platform for Web Hosting, Async Tasks, and Redis:

Multi-Language Support

• Develop with Node.js, Python, Go, or Rust.

Deploy unlimited projects for free

• pay only for usage — no requests, no charges.

Unbeatable Cost Efficiency

• Pay-as-you-go with no idle charges.
• Example: $25 supports 6.94M requests at a 60ms average response time.

Streamlined Developer Experience

• Intuitive UI for effortless setup.
• Fully automated CI/CD pipelines and GitOps integration.
• Real-time metrics and logging for actionable insights.

Effortless Scalability and High Performance

• Auto-scaling to handle high concurrency with ease.
• Zero operational overhead — just focus on building.

Explore more in the Documentation!

Follow us on X: @Do You Really Know AbortController?HQ

---

Read on our blog

The above is the detailed content of Do You Really Know AbortController?. For more information, please follow other related articles on the PHP Chinese website!