正文

如何判断JavaScript中当前是否有网络请求正在进行

/0 浏览量
0504

在JavaScript中，判断当前是否有网络请求正在进行是一个常见的需求，尤其是在开发涉及异步操作和数据处理的应用时。以下是一些方法来实现这一功能：

1. 使用 XMLHttpRequest 对象

在旧版本的浏览器中，XMLHttpRequest 是进行网络请求的主要方式。你可以通过以下步骤来判断是否有网络请求正在进行：

创建一个标志变量

let xhrCount = 0;

在发送请求前增加计数

在发起请求之前，将计数器加一：

xhrCount++;

在请求的 onload 或 onerror 事件中减少计数

请求完成（无论是成功还是失败）后，减少计数器：

xhrCount--;

判断是否有请求正在进行

function isRequesting() {
  return xhrCount > 0;
}

2. 使用 fetch API

fetch API 是现代浏览器中推荐的方法来发起网络请求。以下是如何使用 fetch 来判断是否有请求正在进行：

创建一个标志变量

let fetchCount = 0;

使用 fetch 时增加计数

在调用 fetch 时，增加计数器：

fetchCount++;

使用 Promise 的 finally 方法减少计数

无论请求成功还是失败，finally 方法都会执行，这是减少计数器的理想位置：

fetch(url)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  })
  .finally(() => {
    fetchCount--;
  });

判断是否有请求正在进行

function isRequesting() {
  return fetchCount > 0;
}

3. 使用 AbortController

AbortController 允许你通过一个 abort 方法来取消 fetch 请求。你可以使用它来跟踪请求的数量：

创建一个 AbortController 实例

let abortControllers = [];

在发送请求时添加 AbortController

const controller = new AbortController();
abortControllers.push(controller);

取消请求并移除 AbortController

controller.abort();
abortControllers = abortControllers.filter(c => c !== controller);

判断是否有请求正在进行

function isRequesting() {
  return abortControllers.length > 0;
}

总结

以上方法都可以用来判断JavaScript中是否有网络请求正在进行。选择哪种方法取决于你的具体需求以及你正在使用的浏览器和API。在使用这些方法时，请确保处理好请求的取消和异常，以避免潜在的资源泄露和性能问题。

-- 展开阅读全文 --