如何用JavaScript获取当前页面正在进行的Ajax请求数？jQuery.active返回0异常

首先，你提到的jQuery.active失效的问题，大概率是因为它只统计jQuery自身发起的Ajax请求——如果页面里有用原生XMLHttpRequest、fetch或者其他库（比如axios）发送的请求，jQuery.active是不会把这些算进去的。另外，也有可能是你的jQuery版本过低，或者请求已经完成了但你误以为还在进行中。

下面分两种场景给你解决方案：

场景1：只统计jQuery发起的请求 #

如果你的项目里所有Ajax都是用jQuery的$.ajax、$.get、$.post等方法发送的，那可以用下面两种方式：

方式1：确认jQuery.active的正确使用 #

先确保你没有在请求完成后才去读取jQuery.active。比如在请求发送后立刻打印：

// 发起一个请求
$.get('/api/data', function() {
  console.log('请求完成');
});

// 立刻打印当前活跃请求数
console.log(jQuery.active); // 这里应该返回1，而不是0

如果还是返回0，检查你的jQuery版本（建议用3.x以上版本），或者看看是不是请求被同步执行了（同步请求会阻塞，此时jQuery.active可能不会实时更新）。

方式2：自定义计数器（更可靠） #

如果jQuery.active还是不好用，你可以利用jQuery的全局Ajax事件自己维护一个计数器：

let activeAjaxCount = 0;

// 请求开始时计数+1
$(document).ajaxSend(function() {
  activeAjaxCount++;
});

// 请求完成（成功/失败）时计数-1
$(document).ajaxComplete(function() {
  activeAjaxCount = Math.max(0, activeAjaxCount - 1); // 防止出现负数
});

// 随时获取当前活跃请求数
function getActiveAjaxCount() {
  return activeAjaxCount;
}

这样不管请求成功还是失败，计数器都会准确更新。

场景2：统计所有类型的Ajax请求（包括原生、fetch、axios等） #

如果页面里混合了多种请求方式，那需要拦截所有可能的请求入口：

拦截原生XMLHttpRequest #

let activeRequestCount = 0;

// 保存原生的open和send方法
const originalXHROpen = XMLHttpRequest.prototype.open;
const originalXHRSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.open = function(method, url) {
  this._url = url;
  originalXHROpen.apply(this, arguments);
};

XMLHttpRequest.prototype.send = function() {
  activeRequestCount++;
  // 请求完成时（不管成功失败）计数-1
  this.addEventListener('loadend', function() {
    activeRequestCount = Math.max(0, activeRequestCount - 1);
  });
  originalXHRSend.apply(this, arguments);
};

拦截fetch请求 #

const originalFetch = window.fetch;

window.fetch = function(...args) {
  activeRequestCount++;
  return originalFetch.apply(this, args)
    .finally(() => {
      activeRequestCount = Math.max(0, activeRequestCount - 1);
    });
};

拦截axios请求 #

如果用了axios，可以用它的拦截器：

axios.interceptors.request.use(function(config) {
  activeRequestCount++;
  return config;
});

axios.interceptors.response.use(function(response) {
  activeRequestCount = Math.max(0, activeRequestCount - 1);
  return response;
}, function(error) {
  activeRequestCount = Math.max(0, activeRequestCount - 1);
  return Promise.reject(error);
});

最后，你可以写一个统一的方法来获取当前活跃请求数：

function getTotalActiveRequests() {
  return activeRequestCount;
}

这样不管是哪种方式发起的请求，都能被统计到啦！

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