How can I cancel requests in Fetch and Axios?

How can I cancel requests in Fetch and Axios?

In Fetch, you can use the AbortController to cancel requests. In Axios, you can use CancelToken. Would you like examples?

Yes, please provide examples for both Fetch and Axios.

For Fetch, you can do this:

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

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data));

// To cancel:
controller.abort();

And for Axios:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
}).then(response => {
  console.log(response.data);
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// To cancel:
cancel('Operation canceled by the user.');

What happens if I try to use a canceled request?

If you try to use a canceled request, Fetch will throw an error, and Axios will trigger the catch block with a cancellation message.