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

Question

我对JS世界相当陌生，并与React合作。找不到确切的解决办法。

我想要实现一个应用程序级空闲计时器，当用户在特定时间内不提出任何服务器请求时，该定时器将被激活。函数应该在上一次XHR请求的X分钟之后触发，而不管用户是否在组件之间导航。

例如，如果用户单击一个按钮，该按钮调用API，只在屏幕周围播放，而不对X分钟进行另一个服务调用，则应该触发该函数。在这个阶段，虽然用户在网站上不是空闲的，但网络活动中存在着一种懒惰。我想要探测到这一点并执行一些操作。

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

Answer 1

使用PerformanceObserver检测fetch，然后使用setTimeout添加/更新timer

​

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
);

​

Answer 2

网络信息应用。

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

但是这个Api没有很好的支持我能用一下吗。