POST 請求獲取正文的服務工作者獲取事件

Question

如何在 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);

})

ps：如有語法錯誤，請忽略。

Answer 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();
  ...
})