ServiceWorker 的“获取”：不是 Response 的对象已传递给 responseWith()

Question

服务工作者“获取”不返回响应对象

我正在尝试使用缓存内容来回答请求。如果缓存没有所需的内容，我将从服务器获取，将响应放入缓存并返回。

self.addEventListener('fetch', function (event) {
  if (event.request.method != 'GET')
    return;
  event.waitUntil((async () => {
    // some IndexedDB stuff which works fine
  })());
  event.respondWith((async () => { //<----------- this is line 154
    var freshResource = fetch(event.request).then(async function (response) {
      if (!response || response.status !== 200 || response.type !== 'basic') {
        return response;
      }
      if (ENABLE_DYNAMIC_CACHING) {
        var responseToCache = response.clone();
        caches.open(DYNAMIC_CACHE).then(function (cache) {
          cache.put(event.request, responseToCache);
        });
      }
      return response;
    }).catch(function (error) {
      console.err('Error: ' + error.message);
    });
    caches.match(event.request).then(async function (resp) {
      return resp || freshResource;
    }).catch(function (e) {
      return freshResource;
    });
  })());
});

当我请求一个页面时，它没有加载，我得到了这个：

“http://localhost:64228”的 FetchEvent 导致网络错误响应：一个不是 Response 的对象被传递给 respondWith()。... @service-worker.js:154

我想知道这是否与异步内容有关...

Answer 1

是的，在函数内部async，最好使用await而不是.then()链来构建基于承诺的逻辑。

这是一个大致等效的重写。您可能需要根据您所追求的确切行为重新排序一些逻辑：

event.respondWith((async () => {
  const cachedResponse = await caches.match(event.request);
  if (cachedResponse) {
    return cachedResponse;
  }

  const response = await fetch(event.request);

  if (!response || response.status !== 200 || response.type !== 'basic') {
    return response;
  }

  if (ENABLE_DYNAMIC_CACHING) {
    const responseToCache = response.clone();
    const cache = await caches.open(DYNAMIC_CACHE)
    await cache.put(event.request, response.clone());
  }

  return response;
})());