时间戳

首页 > 解决方案 > 在 respondWith 中使用异步函数

javascript - 在 respondWith 中使用异步函数

问题描述

我在'fetch' eventListener 中有一个用于缓存的异步函数，然后我在'respondWith()' 中调用此函数，并使用'await'，但它不起作用。

PS：当我调用它而不等待它的作品时

self.addEventListener('fetch', async e => {
      const req = e.request;
      e.respondWith(await networkAndCache(req));
      console.log('fetch');
});

,

async function networkAndCache(req) {
  const cache = await caches.open(cacheName);
  try {
    const fresh = await fetch(req);
    console.log('fresh');
    await cache.put(req, fresh.clone());
    console.log('put');
    return fresh;
  } catch (e) {
    const cached = await cache.match(req);
    console.log('cached');
    return cached || caches.match(offlineUrl);;
  }
}

标签： javascriptecmascript-6service-worker

解决方案

您必须respondWith 同步调用。如果您使用await,respondWith将在未来某个时间在事件处理过程之外被调用。由于它在外面，浏览器认为处理事件不成功。

为了能够使用异步函数的结果，respondWith还接受一个promise，如果你不使用 await它，你会得到这个。

所以是的，不使用await是去这里的方法。

资料来源：

推荐阅读