Cancelling Duplicate Axios Requests and Building a Reusable Wrapper

During web development, users may trigger repeated API calls—such as rapidly changing filter criteria or repeatedly clicking a submit button—leading to out‑of‑order responses and duplicate data. Canceling unnecessary requests improves user experience and data consistency.

The article first outlines the situations where duplicate requests should be cancelled, then introduces two ways Axios provides for request cancellation.

Method 1: CancelToken.source

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', { cancelToken: source.token })
  .catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // handle error
    }
  });
source.cancel('Operation canceled by the user.');

Method 2: Executor function passed to CancelToken

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor receives a cancel function
    cancel = c;
  })
});
// Cancel the request
cancel();

After understanding the cancellation APIs, the article shows how to wrap this logic in a reusable Axios instance called very‑axios . A Map named pendingAjax stores pending request identifiers and their cancel functions. The wrapper provides:

addPendingAjax(config) – adds a request to the map if duplication checking is enabled.

removePendingAjax(config) – removes and cancels a pending request when a new identical request arrives.

Both functions generate a duplicate key (by default using method + url , or a custom duplicatedKey / duplicatedKeyFn ) and manage the cancel token accordingly.

The wrapper is then integrated with Axios interceptors:

// Request interceptor
this.axios.interceptors.request.use(config => {
  this.removePendingAjax(config);
  this.addPendingAjax(config);
  return config;
});
// Response interceptor
this.axios.interceptors.response.use(response => {
  this.removePendingAjax(response.config);
  return response;
}, err => {
  // Suppress errors caused by cancelled duplicate requests
  let isDuplicated = false;
  try {
    const type = (JSON.parse(err.message) || {}).type;
    isDuplicated = type === REQUEST_TYPE.DUPLICATED_REQUEST;
  } catch (e) { isDuplicated = false; }
  if (isDuplicated) return;
  return Promise.reject(err);
});

Finally, the article describes how to contribute the wrapper to the open‑source very‑axios repository using the fork‑and‑pull‑request workflow, and how to test the package locally with npm link so that changes are reflected in a consuming project.

In summary, the guide provides a complete solution for detecting and cancelling duplicate Axios requests, encapsulating the logic in a reusable library, handling errors gracefully, and contributing the code back to the community.