窗口上是否有事件或属性显示网络调用正在进行或已完成？

Question

窗口对象或文档上是否有属性指示是否正在进行网络调用？

我的页面上到处都有这段代码，在进行网络调用时显示一个图标：

  showNetworkIcon();
  var response = await fetch(url);
  var data = await response.json();
  showNetworkIcon(false);

但是，如果同时有两个呼叫，那么其中一个呼叫将隐藏网络呼叫指示器，而仍然有网络呼叫发生。

有这样的房产吗：

var networkCall = window.requestsOpen;

如果该值为 true，我将无法隐藏网络图标。

或者如果有一个事件我可以监听：

window.addEventListener("networkCallOpen", ()=>{ showNetworkIcon() });
window.addEventListener("networkCallClosed", ()=>{ hideNetworkIcon() });

上述问题是，如果两个调用仍然存在，一个调用将在另一个调用之前关闭，因此仍然需要检查一个属性。除非发生了所有呼叫关闭事件。

window.addEventListener("allNetworkCallsClosed", ()=>{ hideNetworkIcon() });

Answer 1

tl；博士-不:(

Service Worker 内部有 FetchEvent。在普通窗口中，我们只需使用 Abort Signal 即可与 fetch 进行本机交互

您可以将 fetch 包装在一个函数中，该函数会在之前和之后发出事件。这是我在项目中使用的一个函数，我在其中添加了一些事件。希望它能为您指明正确的方向，因为它并不满足您问题中的所有要求。

    fetch: function(url, method = 'GET', data = null) {
        const event = new CustomEvent("networkCallOpen", { detail: url });
        window.document.dispatchEvent(event);

        const init = {
            method: method,
            headers: Auth.authHeader()
        };

        if(data && method !== 'GET') {
            init.body = JSON.stringify(data);
        }

        return fetch(ApiConfig.apiUrl(url), init)
               .then(() => {
                    const event = new CustomEvent("networkCallClosed", , { detail: url });
                    window.document.dispatchEvent(event);
                })            
                .then((resp) => checkResponse(resp, method))
                .then(buildResponse);
    }