JavaScript 中如何终止网络请求？

1.JavaScript 中使用 AbortController 和 AbortSignal 中止网络请求。（AbortController.abort()）

通过 AbortController 创建新的 AbortController 对象，然后使用其 abort() 方法来中止请求。在创建请求时，将 AbortController.signal 分配给请求的 signal 属性，以便在调用 abort() 方法时取消请求。以下是使用 AbortController 中止 fetch 请求的示例：

// 创建 AbortController 实例
const controller = new AbortController();
// 获取 AbortController 的 signal 属性
const signal = controller.signal;

// 使用 Fetch API 发起网络请求，传递 signal 作为 signal 选项
fetch(url, { signal })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 检查错误类型是否为 AbortError
    if (error.name === 'AbortError') {
      console.log('Request was cancelled');
    } else {
      console.log('Request failed:', error);
    }
  });

// 在需要取消请求的地方调用 controller.abort()
// 例如，可通过按钮点击等用户交互触发取消操作
// controller.abort();

2.xhrInstance.abort()
使⽤ XHR 对象中⽌请求，可以调⽤ abort() ⽅法。示例：

const xhr = new XMLHttpRequest()
xhr.open(method,url)
xhr.send()
// 然后在某个时间点调⽤ abort() ⽅法
xhr.abort();

3.CancelToken

// 创建 CancelToken 实例
const source = axios.CancelToken.source();

// 发起 GET 请求，传递 cancelToken 选项
axios.get('/api/data', {
  cancelToken: source.token
}).then(response => {
  // 处理响应
}).catch(error => {
  // 检查是否为取消请求的错误
  if (axios.isCancel(error)) {
    console.log('请求已被取消：', error.message);
  } else {
    console.log('请求出错：', error.message);
  }
});

// 在需要取消请求的地方调用 source.cancel()
// 例如，可通过按钮点击等用户交互触发取消操作
// source.cancel('请求已被用户取消');