javascript - 在获取事件中同时使用 respondWith 和 waitUntil

Question

是否有必要在 respondWith(本身在 fetch 事件中)中使用 waitUntil？ respondWith 是否已经waitUntil 收到已解决的 promise ？

对此的一些讨论是 here ，其中给出了以下简单示例，其中使用了两者:

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 告诉 service worker 为正在进行的任务保持事件状态，但不会延迟响应。