Using the Signal Property in Modern Axios

The signal property in modern Axios allows developers to cancel in-flight HTTP requests using the standard web AbortController interface. Introduced in Axios v0.22.0, this property replaces the deprecated CancelToken mechanism, aligning Axios with modern JavaScript and Web API standards. By linking an HTTP request to an AbortSignal, you can terminate unnecessary network calls, prevent memory leaks, eliminate race conditions, and optimize resource usage across frontend and backend applications.

How the signal Property Works

The signal property accepts an instance of AbortSignal, which is an object returned by an AbortController. When you pass this signal into your Axios request configuration, Axios listens for an abort event on that specific signal.

If the abort() method is invoked on the associated AbortController, Axios immediately halts the network request and rejects the request promise with an abort error (CanceledError).

Basic Implementation Example

import axios from 'axios';

// 1. Create an instance of AbortController
const controller = new AbortController();

// 2. Pass the controller's signal to the request config
axios.get('https://api.example.com/data', {
  signal: controller.signal
})
.then(response => {
  console.log('Data fetched:', response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled:', error.message);
  } else {
    console.error('Request failed:', error);
  }
});

// 3. Abort the request whenever necessary
controller.abort();

Key Use Cases

1. Handling Component Unmounting (React/Vue)

When a user navigates away from a page or a UI component unmounts before an API request completes, the pending response is no longer needed. Attaching a signal allows you to abort active requests in cleanup functions (e.g., inside a useEffect return block in React), preventing memory leaks and updates to unmounted component state.

2. Autocomplete and Search Inputs

In typeahead search interfaces, rapid keystrokes trigger multiple consecutive API calls. Without cancellation, slower earlier requests might resolve after faster subsequent requests, causing race conditions and displaying outdated data. Using AbortController.abort() ensures prior pending searches are canceled before the newest query is executed.

3. Custom and Dynamic Timeouts

While Axios provides a timeout property, you can also leverage AbortSignal.timeout(ms) to automatically abort a request after a specific duration:

axios.get('https://api.example.com/data', {
  signal: AbortSignal.timeout(5000) // Automatically aborts after 5 seconds
});

Error Handling for Canceled Requests

When a request is aborted via signal, the promise is rejected. Modern Axios provides the axios.isCancel(error) utility function to check if the error was caused by a manual cancellation. Alternatively, you can verify if error.name === 'CanceledError'. Separating cancellation handling from genuine network or server errors ensures smooth user feedback without triggering false error alerts in your application.