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导致网络错误响应：将不是响应的对象传递给responseWith（）。 ... @ 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;
})());

ServiceWorker的“提取”：不是响应的对象已传递给responseWith（）

1 个答案: