Introduction to Native Abort Controller

The AbortController is a built-in JavaScript object used to abort one or more DOM requests, like fetch operations, promises, or any asynchronous tasks. This feature greatly helps in enhancing resource management and user experience, especially in complex web applications.

Basic Usage

Create an AbortController instance and associate it with a fetch request:

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

fetch('/some-api-endpoint', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// Abort the fetch request
controller.abort();

Handling Multiple Requests

AbortController can handle multiple fetch requests:

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

fetch('/api/endpoint-1', { signal }).catch(e => console.log('fetch 1', e));
fetch('/api/endpoint-2', { signal }).catch(e => console.log('fetch 2', e));

// Aborting both requests
controller.abort();

Combining with Timeouts

Using AbortController with timeouts:

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

setTimeout(() => controller.abort(), 5000); // Abort after 5 seconds

fetch('/api/timeout-endpoint', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request timed out');
    } else {
      console.error('Fetch error:', error);
    }
  });

Example Application

An example application demonstrating real-time search with abortable fetch requests:

async function search(query) {
  const controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(`/search?query=${query}`, { signal });
    const results = await response.json();
    displayResults(results);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Search aborted');
    } else {
      console.error('Search error:', error);
    }
  }

  return controller;
}

let currentController;

document.getElementById('searchInput').addEventListener('input', (event) => {
  if (currentController) {
    currentController.abort(); // Abort the previous request
  }
  
  currentController = search(event.target.value);
});

function displayResults(results) {
  // Function to update the UI with search results
}

This application features an input field where users type their search query. The previous request is always aborted if a new input event occurs before the fetch is complete, ensuring only the latest request is processed.

Additional capabilities of AbortController make it very powerful for managing various asynchronous tasks in modern web applications.

Hash: df751cff10f6a7de2af586b806f52579e28542efa54fd557dd5f2b1fbb4ab774