Axios v1 request cancellation and CancelToken deprecation boundary

Answer to the Question

Use AbortController (the signal option) for all new Axios requests. For Node.js <18.13.0, import the abort-controller polyfill and expose it as a global so Axios can use the same API. Wrap legacy CancelToken code in a small shim that forwards abort events to an AbortController, but keep the shim out of new code paths. This keeps modern browsers and older Node environments consistent, and the shim can be removed once the code base no longer uses CancelToken.

Confirmed Facts

• Axios v1+ accepts AbortSignal via the signal config property.
• CancelToken emits a DeprecationWarning and will be removed in Axios v2.
• Node.js 18.13.0+ ships with a global AbortController.
• Browsers have native support for AbortController since Chrome 66, Firefox 57, Safari 12.1.
• The abort-controller npm package works in Node <18.13.0 and is fully compatible with Axios.
• Axios treats signal as authoritative; if both signal and cancelToken are supplied, signal wins.

Recommended Steps for New Code

1. Install the polyfill for older Node targets:

   npm install abort-controller --save
   

2. In the entry point for Node builds, expose the polyfill as a global (only for Node <18.13.0):

   if (typeof AbortController === 'undefined') {
     const { AbortController } = require('abort-controller');
     global.AbortController = AbortController;
   }
   

3. Create a helper that returns a controller and the Axios config fragment:

   function createAbortConfig() {
     const controller = new AbortController();
     return {
       signal: controller.signal,
       abort: () => controller.abort(),
     };
   }
   

4. Use the helper in every request:

   const { signal, abort } = createAbortConfig();
   axios.get('/api/data', { signal })
     .then(handleSuccess)
     .catch(err => {
       if (axios.isCancel(err)) return console.log('Request cancelled');
       throw err;
     });
   // When needed:
   abort();
   

5. For legacy code that still uses CancelToken, wrap it so that it forwards to an AbortController:

   function legacyToAbortToken() {
     const controller = new AbortController();
     const token = new axios.CancelToken(cancel => {
       controller.signal.addEventListener('abort', () => cancel('canceled'));
     });
     return { token, abort: () => controller.abort() };
   }
   

6. Gradually replace cancelToken usage with the new signal approach. Once all requests use signal, remove the shim.

Handling Complex Cancellation Logic

• When multiple abort sources exist (e.g., UI cancel + timeout), compose signals using AbortSignal.any (Node 16.14+ / modern browsers). For older environments, implement a small combinator:

  function anySignal(signals) {
    const controller = new AbortController();
    signals.forEach(s => s.addEventListener('abort', () => controller.abort()));
    return controller.signal;
  }
  

• Pass the composed signal to Axios:

  const combinedSignal = anySignal([uiSignal, timeoutSignal]);
  axios.get('/api', { signal: combinedSignal });
  

Testing & Verification

• Run the same request against Node 16, 18, and 20 to confirm abort behavior.
• In browsers, open dev tools, trigger abort, and ensure the request is canceled and axios.isCancel returns true.
• Check that no DeprecationWarning appears when signal is used.

Missing Diagnostic Detail

Do you currently use any Axios interceptors or adapters that still reference config.cancelToken? If so, those will need to be audited before fully dropping CancelToken.

Likely Explanation (Unverified)

Some projects keep a dual‑path approach: they expose an AbortController polyfill for Node <18, then use a shim to translate legacy CancelToken calls into AbortSignal events. This allows a gradual migration while keeping the code base functional across all target environments. Once the project no longer relies on CancelToken, the shim can be removed, leaving a single, future‑proof cancellation strategy.