Service Worker读取克隆POST请求体后调用event.respondWith报错如何解决？

问题场景 #

在Service Worker的fetch监听器中，需要读取POST请求的请求体内容，之后再转发原请求。但克隆请求并读取其body后，调用event.respondWith(fetch(event.request))时会触发错误：

Failed to execute 'respondWith' on 'FetchEvent': The event handler is already finished

即使改用new Request()复制请求，问题依然存在。原代码示例：

'use strict';

self.addEventListener('fetch', async (event) => {
  try {
    const req_obj = await event.request.clone().json();
    console.log(req_obj);
  } catch (e) {
    console.error(e);
  }

  event.respondWith(fetch(event.request));
});

解决方案 #

核心是将异步逻辑包裹在event.respondWith接收的Promise中，确保浏览器等待异步操作完成后再处理请求转发：

'use strict';

self.addEventListener('fetch', (event) => {
  // 仅处理POST请求，跳过其他请求类型
  if (event.request.method !== 'POST') {
    event.respondWith(fetch(event.request));
    return;
  }

  // 将所有逻辑放入respondWith的Promise参数中
  event.respondWith(
    (async () => {
      try {
        const clonedReq = event.request.clone();
        const reqObj = await clonedReq.json();
        console.log('请求体内容:', reqObj);
      } catch (err) {
        console.error('解析请求体失败:', err);
      }

      // 转发原请求
      return fetch(event.request);
    })()
  );
});

原因说明 #

• 原代码的问题在于事件生命周期时机错误：async标记的监听器函数中，await会让函数暂停执行，此时浏览器会判定fetch事件的处理已完成。等await结束后再调用event.respondWith，已经超出了事件的有效处理窗口，因此触发错误。
• Request.clone()是安全的，克隆后的请求读取body不会影响原请求的可用性。MDN中关于“从流构造请求后克隆”的警告，针对的是特殊的流处理场景，和当前的POST请求体读取场景无关。

内容的提问来源于stack exchange，提问作者Matt Miller