javascript - Serviceworker Bug event.respondWith - Stack Overflow

admin管理员组

文章数量:1290982

My serviceworker has the logic that when a fetch event happens,first it fetches an endpoint which contains some boolean value (not the event.request.url) and check the value , based on the value i am calling event.respondWith() for the current fetch event, where i am serving the response from cache.But i am getting the following error ,

Uncaught (in promise) DOMException: Failed to execute 'respondWith' on 'FetchEvent': The fetch event has already been responded to

I checked here that this error is throws when m_state is not equal to Initial

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

I am doubting that since i am having an additional fetch event somehow it is consuming the previous fetch event,it is changing the m_state variable,though i am not fetching the event url.I am not sure what could be the reason and what is the solution for it.But why is it saying

I am pasting my code snippet below.

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

The event.respondWith part is throwing the error.Please suggest how to solve this problem.

edit :

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

My serviceworker has the logic that when a fetch event happens,first it fetches an endpoint which contains some boolean value (not the event.request.url) and check the value , based on the value i am calling event.respondWith() for the current fetch event, where i am serving the response from cache.But i am getting the following error ,

Uncaught (in promise) DOMException: Failed to execute 'respondWith' on 'FetchEvent': The fetch event has already been responded to

I checked here that this error is throws when m_state is not equal to Initial

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

I am doubting that since i am having an additional fetch event somehow it is consuming the previous fetch event,it is changing the m_state variable,though i am not fetching the event url.I am not sure what could be the reason and what is the solution for it.But why is it saying

I am pasting my code snippet below.

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

The event.respondWith part is throwing the error.Please suggest how to solve this problem.

edit :

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

• javascript
• service-worker
• progressive-web-apps

Share Improve this question Follow edited Nov 7, 2017 at 20:32 Max 9851212 silver badges2828 bronze badges asked Mar 17, 2016 at 14:06 biswpobiswpo 80988 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You need to call event.respondWith synchronously when handling fetch event. If you don't, browser assumes it should proceed with handling the request. That's why when you get around to calling respondWith in your code the request is already handled and you see the fetch event has already been responded to exception.

In other words: try calling your checkHash inside of handleRequest and not the other way around.

Re "since i am having an additional fetch event somehow it is consuming the previous fetch event" this shouldn't be a problem; you can fetch() from within the fetch event handler and things will work out fine:

self.addEventListener("fetch", e => {
  e.respondWith(
    fetch("https://fonts.googleapis./css?family=Open+Sans")
    .then(_ => fetch(e.request))
  );
});

I don't quite understand what you're trying to achieve with your code but fetching multiple times, with the first influencing the behavior of the second, works fine.

本文标签： javascriptServiceworker Bug eventrespondWithStack Overflow