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

Question

我的服务人员中有以下代码：

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

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

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;
  }));
});