服务工作者：在获取请求时检索xhr主体

Question

如何从 xhr (XMLHttpRequest) send(body) 调用中检索发送的主体？

我的 xhr 变量是一个 XMLHttpRequest，准备使用 POST 方法调用内部 URL（例如：/path/api）。

xhr.send("a=1");

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

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

我可以通过event.request.url检索到一些事件请求的属性，但是我无法找到获取原始xhr主体（即"a=1"）的方法。

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

return fetch(event.request);

服务器可访问正文数据。

以下是我在SW fetch方法中接收到的请求对象的一部分：

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()捕获中检索发送请求的内容/正文？

谢谢！

- Miguel Guardo

Answer 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/）帮助我理解这一切是如何工作的。

- Miguel Guardo

---

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