使用d3 (带有d3-fetch)发送POST请求

Question

我需要通过HTTP POST请求将JSON对象发送到远程服务。最近的d3.js版本使用d3-fetch来收集数据（从文件或通过网络），而不是d3-request。我找到了许多早期版本库的示例（1, 2 和 3），但对于最新版本（截至2018年8月），没有找到任何内容。d3-fetch文档也缺少如何设置RequestInit对象以发送POST请求的示例。有人做过这个吗？

- jotrocken

Answer 1

我找到了一种临时解决方案，使用d3.text实现。

var request = d3.text("http://localhost:8080/service?action=store", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: "entry=" + JSON.stringify(playerData)
});

我需要将 Content-Type 设置为 application/x-www-form-urlencoded，以便发送 JSON 负载。必须将 JSON 转换为字符串并将其包装为某个任意键的值，以便请求通过。如果可能的话，我可以直接更改后端服务的源代码以直接读取 JSON。

使用带有纯 JSON 作为正文和相应 Content-Type 的 d3.json（请参阅什么是正确的 JSON 内容类型？）不起作用：请求不会包含任何负载。

我的解决方案看起来相当复杂，所以我想肯定有更简洁的方法，我很愿意接受任何有效的改进。

- jotrocken

Answer 2

由于您没有指定使用的方法，让我们假设您正在使用 d3.json（很可能是这样，因为您想发送JSON）。

如果您查看 API，您将看到：

d3.json(input[, init])

其中 init 是您已经知道的 init 对象。从 Fetch documentation 中允许的字段中，我们可以看到：

method：一个字符串，用于设置请求的方法。

最重要的是：

请求有一个相关的方法（方法）。除非另有说明，否则为 GET。

因此，您需要像这样的东西：

d3.json(input, {method: "post"})

除了其他必要的字段之外，这是一个有趣的例子（与D3无关）：https://googlechrome.github.io/samples/fetch-api/fetch-post.html

- Gerardo Furtado

---

这是我使用 d3.json 的进展。然而，我找不到一种将 JSON 对象包含在请求中的方法。我将在下面发布我找到的解决方法。也许你可以扩展你的解决方案以更清晰地实现相同的功能。 - jotrocken

Answer 3

我使用这个方法取得了成功：

d3.json("http://localhost:8545", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      jsonrpc: "2.0",
      method: "eth_blockNumber",
      params: [],
      id: 1
    })
})

- geoff

Answer 4

解析资源返回的JSON：

<script src="https://d3js.org/d3-dsv.v2.min.js"></script>
<script src="https://d3js.org/d3-fetch.v2.min.js"></script>
<script>
    d3.json("<url>", {
        method: "POST",
        headers: { "Content-Type": "application/json" }
    }).then(data => {
        console.log(JSON.parse(data.body))
    })
</script>

- diogo