在fetch事件中使用respondWith和waitUntil

Question

是否有必要使用waitUntil内部a respondWith(本身在fetch事件中)？不respondWith已经waitUntil接收到一个解决的承诺？

这里有一些讨论,其中给出了以下简单示例,其中使用了两个:

addEventListener('fetch', event => {
  event.respondWith(
    fetch(whatever).then(response => {
      event.waitUntil(addThisToTheCache(response));
      return response;
    })
  );
});

但是没有这个可以写waitUntil吗？如下:

addEventListener('fetch', event => {
  event.respondWith(
    fetch(whatever).then(response => {
      return addThisToTheCache(response).then(() => {
        return response;
      });
    })
  );
});

Answer 1

这将延迟浏览器处理和显示响应两秒钟:

addEventListener('fetch', event => {
  event.respondWith(async function() {
    const response = await fetch(event.request);
    await processResponseForTwoSeconds(response);
    return response;
  }());
});

这不会:

addEventListener('fetch', event => {
  event.respondWith(async function () {
    const response = await fetch(event.request);
    event.waitUntil(processResponseForTwoSeconds(response));
    return response;
  }());
});

waitUntil 告诉服务工作者为正在进行的任务保持活力,但不会延迟响应.