fetch and addEventListener

Question

I read in https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Response_objects that you can use addEventListener to trigger when a fetch happens.

I'm playing with it, and I can't get it to fire. Here's the code. I'm also using Chrome

addEventListener('fetch', event => alert('test'));

Answer 1

The fetch event in your example only fires in a Service Worker. There is no built-in event that is fired on a normal webpage when a fetch happens.

However, you could hook the global fetch function so it does what you want.

window.fetch = new Proxy(window.fetch, {
    apply(actualFetch, that, args) {
        // Forward function call to the original fetch
        const result = Reflect.apply(actualFetch, that, args);

        // Do whatever you want with the resulting Promise
        result.then((response) => {
            console.log("fetch completed!", args, response);
        });

        return result;
    }
});

This would print to the console every time a fetch is completed.