Using async/await with respondWith

Question

I have two bits of code which i would expect to have worked in the same way however they dont - only one actually works and i cant figure out why.

Working one

 self.addEventListener('fetch',(e)=>{ e.respondWith(handleRequest(e.request)) }) async function handleRequest(req){ const res = await fetch(req); const cache = await caches.open(cacheName) if(res.ok){ // add the response to the caches and return the response await cache.put(req, res.clone()) return res; }else{ const res = cache.match(req) return res } }

non working one

 self.addEventListener('fetch',(e)=>{ e.respondWith(async () => { const res = await fetch(e.request); const cache = await caches.open(cacheName) if(res.ok){ // add the response to the caches and return the response await cache.put(e.request, res.clone()) return res; }else{ const res = cache.match(e.request) return res } }) })

Can anyone see why this is?

in your async arrow function pass e.request` as a parameter as you did for normal function call. — Shankar Ganesh Jayaraman
– Shankar Ganesh Jayaraman, Commented Dec 20, 2020 at 13:41
In the first example, you're passing the result of a function call. In the second, you're creating a functions and then passing a reference to it, but not actually calling it. — Ouroborus
– Ouroborus, Commented Dec 20, 2020 at 15:23

tronje · Accepted Answer · 2021-05-21 16:46:29Z

As stated by @Ouruborus you only passing the function reference instead of the function result. Compare this two example

console.log(() => { return 'test' });

vs.

console.log((() => { return 'test' })());

If you rewrite your code like this it should work:

self.addEventListener('fetch', (e) => { e.respondWith((async () => { const res = await fetch(e.request); const cache = await caches.open(cacheName) if (res.ok) { // add the response to the caches and return the response await cache.put(e.request, res.clone()) return res; } else { const res = cache.match(e.request) return res } })()); });

Collectives™ on Stack Overflow

Using async/await with respondWith

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related