可取消的异步网络请求

在解决"可取消的异步网络请求"的问题中，可以使用两种常见的方法：Promise和axios库。

1. 使用Promise：

// 创建一个Promise对象
const requestPromise = new Promise((resolve, reject) => {
  // 执行异步网络请求
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data');
  xhr.onload = () => {
    if (xhr.status === 200) {
      resolve(xhr.responseText);
    } else {
      reject(new Error(xhr.statusText));
    }
  };
  xhr.onerror = () => {
    reject(new Error('Network Error'));
  };
  xhr.send();
});

// 调用请求
const request = () => {
  return requestPromise;
};

// 取消请求
const cancelRequest = () => {
  xhr.abort();
};

// 使用请求
request()
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

2. 使用axios库：

// 安装和引入axios库
import axios from 'axios';

// 创建一个取消令牌
const source = axios.CancelToken.source();

// 创建一个异步网络请求
const request = axios.get('https://api.example.com/data', {
  cancelToken: source.token
});

// 取消请求
const cancelRequest = () => {
  source.cancel('请求被取消');
};

// 使用请求
request
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求被取消', error.message);
    } else {
      console.error('网络错误', error);
    }
  });

这两种方法都可以实现可取消的异步网络请求。使用Promise时，可以自己手动创建一个XMLHttpRequest对象并监听其事件；而使用axios库时，可以使用其提供的CancelToken来取消请求。根据实际情况选择适合的方法。