如何使用Service Worker在fetch响应返回页面对其进行拦截读取

完全可以实现。你不需要对原始请求做任何修改，只需在Service Worker的fetch事件逻辑中，先正常发起原始请求，拿到响应后克隆一份响应流用来读取内容，再把原始响应正常返回给页面即可。

注意：Response的主体是仅可消费一次的流对象，必须调用.clone()方法复制响应再进行内容读取，不能直接消费原本要返回给页面的响应流，否则页面会无法正常获取响应内容。

示例代码 #

self.addEventListener('fetch', (event) => {
  // 此处替换为你自己的指定请求匹配规则，示例匹配所有后缀为.json的请求
  if (/\.json$/.test(event.request.url)) {
    event.respondWith(
      // 直接传入原始请求对象发起请求，不做任何参数修改
      fetch(event.request)
        .then(originalResponse => {
          // 克隆响应，专门用于内容读取，不影响原响应返回
          const clonedResponse = originalResponse.clone();

          // 读取响应内容，根据你的实际业务场景可更换为 text()、blob()、formData()等方法
          clonedResponse.json()
            .then(responseContent => {
              // 此处即可访问响应内容，可执行日志上报、内容校验等自定义逻辑
              console.log('获取到目标请求的响应内容：', responseContent);
            })
            .catch(readErr => {
              // 响应内容读取失败的异常单独处理，不要影响原请求返回
              console.error('响应内容读取失败：', readErr);
            });

          // 直接返回原始响应给页面，完全不修改原有响应内容
          return originalResponse;
        })
        .catch(requestErr => {
          // 请求本身异常时正常抛出，不干扰页面原有错误处理逻辑
          console.error('目标请求发起失败：', requestErr);
          throw requestErr;
        })
    );
  }
});

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