切换标签时未完成的Ajax请求干扰其他标签，如何阻断其影响？

这种异步请求干扰的问题我之前做后台管理系统时也碰到过，用布尔值判断确实容易踩坑——毕竟请求发出去之后，就算你把标记改成false，请求还是会在后台跑完，回调照样会执行，顶多是在回调里加判断跳过DOM操作，但本质上没终止请求，还浪费资源。

给你推荐现在标准的解决方案：用AbortController API，这是现代浏览器原生支持的，可以真正终止未完成的fetch或XMLHttpRequest请求，从根源上避免旧请求的回调干扰当前标签页。

具体实现步骤： #

1. 先声明一个全局变量来保存当前的请求控制器：

let currentAbortController = null;

2. 切换标签页的逻辑里，先终止之前未完成的请求：

function switchTab(tabIndex) {
  // 先终止旧请求
  if (currentAbortController) {
    currentAbortController.abort();
    currentAbortController = null;
  }

  // 然后发起当前标签页的请求
  fetchTabData(tabIndex);
}

3. 发起请求时，创建新的AbortController，把signal传给请求：

如果你用的是fetch：

function fetchTabData(tabIndex) {
  currentAbortController = new AbortController();
  const signal = currentAbortController.signal;

  fetch(`/api/tab-data/${tabIndex}`, { signal })
    .then(response => response.json())
    .then(data => {
      // 这里只处理当前标签页的DOM更新
      updateTabContent(tabIndex, data);
    })
    .catch(error => {
      // 捕获请求被终止的错误，避免控制台报错
      if (error.name === 'AbortError') {
        console.log(`标签页${tabIndex}的请求已被终止`);
        return;
      }
      // 处理其他错误
      console.error('请求出错:', error);
    });
}

如果你用的是传统的XMLHttpRequest：

let currentXhr = null;

function fetchTabData(tabIndex) {
  // 先终止旧的XHR请求
  if (currentXhr) {
    currentXhr.abort();
    currentXhr = null;
  }

  currentXhr = new XMLHttpRequest();
  currentXhr.open('GET', `/api/tab-data/${tabIndex}`);
  currentXhr.onload = function() {
    if (currentXhr.status === 200) {
      const data = JSON.parse(currentXhr.responseText);
      updateTabContent(tabIndex, data);
    }
  };
  currentXhr.onerror = function() {
    console.error('请求出错');
  };
  currentXhr.onabort = function() {
    console.log(`标签页${tabIndex}的请求已被终止`);
  };
  currentXhr.send();
}

为什么布尔值方法没用？ #

举个例子，你可能之前是这么写的：

let isCurrentTab = true;

// 切换标签时把isCurrentTab改成false
// 请求回调里判断：
if (isCurrentTab) {
  updateTabContent(data);
}

但问题在于，当你切换标签时，旧请求的回调已经进入了事件队列，就算你改了isCurrentTab，回调执行时还是可能因为异步时序问题误判，而且请求本身没有被终止，还是会占用带宽和服务器资源。而AbortController是直接中断请求，服务器可以停止处理，前端也不会触发后续的回调，彻底避免干扰。

额外注意事项： #

• AbortController支持所有现代浏览器（Chrome 60+、Firefox 57+、Edge 16+），如果要兼容IE的话，可以用XMLHttpRequest的abort方法，或者引入polyfill。
• 每次发起新请求前一定要记得终止旧请求，避免多个控制器堆积。

内容的提问来源于stack exchange，提问作者zumuj