我的服务人员的逻辑是,在发生获取事件时,首先会获取包含一些 bool(boolean) 值(不是event.request.url)的端点,并根据我正在调用的值 event.respondWith()来检查该值。对于当前的获取事件,我正在从缓存中提供响应。但是我收到以下错误,



我检查了here,当 m_state 不等于时引发此错误初始

if (m_state != Initial) {
    exceptionState.throwDOMException(InvalidStateError, "The fetch event has already been responded to.");
    return;
}

我怀疑由于我有一个额外的获取事件,它以某种方式正在消耗前一个获取事件,因此它正在更改m_state变量,尽管我没有获取事件url。我不确定这可能是什么原因,什么是解决方案。但是为什么这么说

我在下面粘贴我的代码段。
function fetchEvt(event) {
    check().then(function (status) {
        if (status === 0) {
            handleRequest(event);
        }
    });
}

function checkHash() {
    return new Promise(function (resolve) {
        fetch(endpoint, { credentials: 'include' }).then(function (response) {
            return response.text();
        }).then(function (text) {
            resolve(text);
        });
    }
}

function handleRequest(event) {
    event.respondWith(caches.match(event.request.url).then(function (Response) {
        if (Response) {
            return Response;
        }
        return fetch(event.reuqest);
    }));
}

event.respondWith 部分抛出错误。请提出解决此问题的方法。

编辑:
function handleRequest(event) {
    event.respondWith(checkHash().then(function (status) {
        if (status === true) {
            caches.match(event.request.url).then(function (Response) {
                if (Response) {
                    return Response;
                }
                return fetch(event.reuqest);
            });
        } else if (status === false) return fetch(event.reuqest);
}));

最佳答案

处理event.respondWith事件时,需要同步调用fetch。如果不这样做,浏览器会认为它应该继续处理请求。这就是为什么当您在代码中调用respondWith时,请求已被处理,并且您看到fetch事件已对异常做出响应。

换句话说:尝试在checkHash内部调用handleRequest,而不是相反。

09-16 13:03