ReactJS：如何检测 XHR 请求之间的网络空闲

Question

我对 JS 世界和使用 React JS 还很陌生。找不到任何确切的解决方案。

我想实现一个应用程序级别的空闲计时器，当用户在特定时间段内没有发出任何服务器请求时，该计时器将被激活。该函数应在最后一个 XHR 请求的 X 分钟后触发，无论用户是否在组件之间导航。

例如 - 如果用户单击一个调用 API 的按钮，并且只是在屏幕上播放 X 分钟而没有再次调用服务，则应触发该功能。在这个阶段，虽然用户在网站上并没有闲着，但在网络上却闲着activity。我想检测到这一点并执行一些操作。

另外，想知道解决方案对性能的影响。谢谢！

Answer 1

Network Information Api.

我不确定，但您可以尝试从 downlinkMax 中减去下行链路。

但是这个Api没有得到很好的支持Can i use

Answer 2

使用PerformanceObserver检测fetch然后add/updatetimer使用setTimeout

let timer;

const observer = new PerformanceObserver((items) => {
  items
    .getEntries()
    .filter(({ initiatorType }) => initiatorType === "fetch")
    .forEach((entry) => {
      console.log("Made fetch request", entry.name);
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => console.log("(idle) After 2 sec"), 2000);
    });
});

observer.observe({
  entryTypes: ["resource"],
});

fetch("https://swapi.dev/api/planets/1/").then((res) => res.json());

setTimeout(
  () => fetch("https://swapi.dev/api/planets/2/").then((res) => res.json()),
  1000
);

setTimeout(
  () => fetch("https://swapi.dev/api/planets/3/").then((res) => res.json()),
  3000
);

ReactJS：如何检测 XHR 请求之间的网络空闲

ReactJS : How to detect network idle between XHR requests

javascript

xmlhttprequest

idle-timer

reactjs

axios