服务工作者：获取请求时检索 xhr 正文

Posted 2023-03-14

【中文标题】服务工作者：获取请求时检索 xhr 正文

【英文标题】：Service Workers: Retrieve xhr body when fetching the request

【发布时间】：2017-01-31 15:45:00

【问题描述】：

如何检索我从 xhr (XMLHttpRequest) send(body) 调用发送的正文？ 我的 xhr 变量是一个 XMLHttpRequest，可以使用 POST 方法调用内部 url（例如：/path/api）

xhr.send("a=1");

另一方面，我实现了一个 Service Worker 并创建了处理程序来捕获所有获取请求

self.addEventListener('fetch', function(event, body) 
 
event.respondWith( //Check content of event.request.body to run the right action );

我可以将 event.request 的一些属性作为 event.request.url 检索，但我无法找到检索原始 xhr 正文的方法（即“a=1”）。

有趣的是，当 Service Worker 处理这个请求，并调用网络获取结果时，

return fetch(event.request);

服务器可以访问正文数据。

下面是我在 SW fetch 方法中收到的 Request 对象的摘录

Request method: "POST", url: "http://localhost/services", headers: Headers
, referrer: "http://localhost/m1/", referrerPolicy: "no-referrer-when-downgrade"…

bodyUsed:false
credentials:"include"
headers:Headers
  __proto__:Headers
integrity:""
method:"POST"
mode:"cors"
redirect:"follow"
referrer:"http://localhost/path/"
referrerPolicy:"no-referrer-when-downgrade"
url:"http://localhost/path/api"

有关如何在 Service Worker fetch() 捕获中检索发送请求的内容/正文的任何​​建议？

谢谢！

【参考方案1】：

这对大多数人来说可能很明显，但我想在回复中添加一些注释，以防将来有人遇到我同样的情况。

有几种方法可以从请求中检索正文，具体取决于正文的发送方式

event.request.arrayBuffer()
event.request.blob()
event.request.json()
event.request.text()
event.request.formData()

这些方法中的任何一个都将返回一个 Promise，其中将包含正文内容。瞧！

我还要感谢 Nikhil Marathe (https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/) 帮助我了解这一切是如何运作的。

【讨论】：

为了避免json() 出现异常，我使用try-catch 块-但可能有更聪明的方法吗？