JavaScript中止网络请求的常见方法

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

fetch('/some/api/endpoint', { signal })
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// 在需要中止请求的时候调用
controller.abort();

const xhr = new XMLHttpRequest();
xhr.open('GET', '/some/api/endpoint', true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Request failed:', xhr.statusText);
    }
  }
};

xhr.send();

// 在需要中止请求的时候调用
xhr.abort();

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

axios.get('/some/api/endpoint', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 在需要中止请求的时候调用
source.cancel('Operation canceled by the user.');