POST 请求获取正文的服务工作者获取事件答案

【问题标题】：Service worker fetch event for POST request get bodyPOST 请求获取正文的服务工作者获取事件
【发布时间】：2020-09-12 10:45:03
【问题描述】：

如何在 Service Worker 中捕获 POST 请求的主体。我在 POST 请求中发送身份验证参数，所以我想拦截服务工作者中的获取请求并显示来自 IndexDB 的结果。以下是我的服务人员的代码

self.addEventListener("fetch", event => {
let cloned = event.request.clone();
console.log(cloned.json()); //<<- This line returns error : TypeError: Failed to execute 'json' on 'Request': body stream is locked
let response =  new Promise((resolve)=>{
  let key='mykey'; //Genereate from body, so read body
  let stored = localforage.getItem(key);
  if(stored){
      resolve(stored);
  }else{
    resolve(fetch(cloned).then(res => res.json()).then(res=>{
         localforage.setItem(key,res);
    }));    
  }
})

event.respondWith(response);

})

p.s : 如果有语法错误，请忽略。

【问题讨论】：

确实应该有一个 JavaScript 设置：“ps_please_ignore_syntax_errors_if_any”！那会让生活变得更轻松！ :D ;-)
你解决了吗？捕获 formData 还是 Body？
是的，请求是一个流，因为数据仍在到达服务工作者，您可以捕获数据 request.body.json() ， request.body.formData() 给出参数确定在承诺下使用它。我将很快分享完整的代码来回答这个问题。

标签： javascript service-worker

【解决方案1】：

由于请求正文是 ReadableStream，由于@Mr.Vibe 在上述评论中提到的原因，它无法通过event.request.body 访问，访问正文的一种方法是使用await event.request.json()，但是应该注意，一旦请求正文被读取它不能被重用作为请求的正文，因为它会引发类似This ReadableStream is disturbed (has already been read from), and cannot be used as a body 的错误。所以最好我们克隆请求，然后像await event.request.clone().json()那样访问它的主体，这样以后我们就可以安全地使用原始请求了。

self.addEventListener("fetch", async (event) => {
 let clonedBody = await event.request.clone().json();
  ...
})

【讨论】：

是的，我用它来解决问题。忘记在这里更新了。