Skip to main content

Canceling an API Call

In JavaScript, you can cancel API calls made with fetch and axios using AbortController for fetch and CancelToken (or AbortController in modern versions) for axios.

Canceling an API call using fetch and AbortController​

The AbortController allows you to cancel one or more fetch requests. Here's how you can implement it:

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

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

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

Canceling an API call using axios and CancelToken​

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
  .then(response => console.log(response.data))
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log('Request canceled', err.message);
    } else {
      console.error('Axios error:', err);
    }
  });

// Cancel the request
source.cancel('Operation canceled by the user.');

Canceling an API call using axios and AbortController​

In modern Axios versions, you can use AbortController just like with fetch:

const controller = new AbortController();

axios.get('https://api.example.com/data', { signal: controller.signal })
  .then(response => console.log(response.data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Axios request aborted');
    } else {
      console.error('Axios error:', err);
    }
  });

// Cancel the request
controller.abort();