Clean Async Cancellation with AbortController

Snippet

Clean Async Cancellation with AbortController

The AbortController interface allows you to abort one or more Web requests as and when desired. This is essential for intermediate developers to handle component unmounting in frameworks or to prevent race conditions when multiple requests are triggered sequentially.

snippet.js
javascript
const controller = new AbortController();
const { signal } = controller;
 
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', { signal });
    return await response.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    }
  }
}
 
fetchData();
controller.abort(); // Immediately cancels the fetch

Breakdown

const controller = new AbortController();

Initializes a new controller instance to manage cancellation signals.

{ signal }

Extracts the AbortSignal object to be passed to async operations like 'fetch'.

controller.abort();

Triggers the abort signal, causing any associated requests to fail with an 'AbortError'.

Previous snippet Next snippet

From your library

Clean Async Cancellation with AbortController

Related