查看服务工作者内部的请求是否成功

Question

我的 Service Worker 中有以下代码：

self.addEventListener('fetch', function (event) {
  var fetchPromise = fetch(event.request);

  fetchPromise.then(function () {
    // do something here
  });

  event.respondWith(fetchPromise);
});

但是，它在开发控制台中做了一些奇怪的事情，似乎使脚本加载异步而不是同步（在这种情况下是不好的）。

有什么方法可以在不手动调用 fetch(event.request) 的情况下监听请求何时完成？

例如：

// This doesn't work
self.addEventListener('fetch', function (event) {
  event.request.then(function () {
    // do something here
  });
});

Answer 1

如果您想确保在响应返回到页面之前执行您的整个系列操作，您应该使用整个承诺链进行响应，而不仅仅是 fetch 返回的初始承诺。

self.addEventListener('fetch', function(event) {
  event.respondWith(fetch(event.request).then(function(response) {
    // The fetch() is complete and response is available now.
    // response.ok will be true if the HTTP response code is 2xx
    // Make sure you return response at the end!
    return response;
  }).catch(function(error) {
    // This will be triggered if the initial fetch() fails,
    // e.g. due to network connectivity. Or if you throw an exception
    // elsewhere in your promise chain.
    return error;
  }));
});

查看服务工作者内部的请求是否成功

Seeing if a request succeeds from within a service worker

javascript

service-worker

fetch-api