I read in 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'));

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

• javascript
• ajax
• google-chrome
• fetch

• 7 That's ServiceWorker code. No, it doesn't work in a normal window. – Bergi Commented Jun 8, 2017 at 16:01
• how to listen in the normal window when fetch happens? – Prathamesh Rasam Commented Apr 24, 2018 at 18:52
• Your response is here: developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/… – Mohammad Zare Moghadam Commented May 20, 2018 at 6:30

1 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.