JavaScript中Ajax怎么用abort方法在中途取消已经发出的网络请求-js教程-PHP中文网

javascript 中取消 ajax 请求推荐使用 fetch + abortcontroller。通过 new abortcontroller() 创建控制器，将 controller.signal 传入 fetch，调用 controller.abort() 即可中断请求，触发 aborterror；xmlhttprequest 虽支持 xhr.abort()，但灵活性和现代性不如前者。

javascript中ajax怎么用abort方法在中途取消已经发出的网络请求

在 JavaScript 中，使用 abort() 方法取消已发出的 Ajax 请求，核心是通过 AbortController 实例控制请求生命周期。XMLHttpRequest 也支持 abort()，但现代推荐用 fetch + AbortController，更统一、更易管理。

fetch 配合 AbortController 取消请求

AbortController 提供一个 signal 对象，传给 fetch 的 signal 选项。调用其 abort() 方法即可中断请求。

创建控制器：const controller = new AbortController();
发起请求时传入 signal：fetch(url, { signal: controller.signal })
中途取消：controller.abort()（可随时调用）
取消后，fetch 会立即 reject，错误类型为 DOMException，name 是 "AbortError"

实际使用示例

比如用户输入搜索关键词，每次新输入前取消上一次请求：

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

let controller = null;

function search(query) {
  // 先取消之前的请求（如果存在）
  if (controller) controller.abort();
  
  controller = new AbortController();
  
  fetch(`/api/search?q=${query}`, {
    signal: controller.signal
  })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('请求已被取消');
      } else {
        console.error('请求失败', err);
      }
    });
}

// 比如在输入框输入时调用
document.getElementById('searchInput').addEventListener('input', e => {
  search(e.target.value);
});