How can I cancel an Axios request in Vue.js?

How can I cancel an Axios request in Vue.js?

You can cancel an Axios request in Vue.js using the CancelToken feature. Here's how to do it.

Can you show me a code example?

Sure! Here's a simple example:

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

const fetchData = () => {
  axios.get('/api/data', { cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }) })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.error('Error fetching data', error);
    }
  });
};

// Call fetchData() to initiate the request
// Call cancel() to cancel the request

What if I want to cancel the request based on a user action?

You can call the cancel() function when a specific user action occurs, like clicking a button. Just ensure you store the cancel function when you create the request.