前端如何中断请求 ( axios、原生 ajax、fetch)

在前端中，可以通过多种方式发起HTTP请求，如axios、原生ajax和fetch。如果你想要在请求完成之前就中断它，你可以使用axios的cancel token功能或者对原生的XMLHttpRequest进行中断。

以下是使用axios和原生ajax以及fetch中断请求的方法：

1. 使用axios的cancel token功能：

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

2. 对原生的XMLHttpRequest进行中断：

const xhr = new XMLHttpRequest();
 
xhr.open('GET', 'someUrl', true);
 
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    try {
      if (xhr.status === 200) {
        // handle response
      } else {
        // handle other status codes
      }
    } catch (e) {
      // handle network errors
    }
  }
};
 
xhr.send();
 
// abort the request
xhr.abort();

3. 使用fetch的AbortController中止请求：

const controller = new AbortController();
const signal = controller.signal;
 
fetch('someUrl', {
  signal: signal
}).then(function(response) {
  return response.text();
}).then(function(text) {
  console.log(text);
}).catch(function(error) {
  if (error.name === 'AbortError') {
    console.log('Fetch aborted');
  } else {
    console.log('Fetch error:', error);
  }
});
 
// abort the fetch request
controller.abort();

以上代码展示了如何在不同的HTTP请求库中中断请求。你可以根据你的具体需求和环境选择合适的方法。