从后端向前端发送JSON

Question

我需要对JSON对象有一些澄清。在我的Node后端中，我接收到一个JSON对象，并且在处理完所需的键/值对后，将其发送到前端。这就是我感到困惑的地方——我仍然需要通过response.json()将响应对象转换为JSON。为什么呢？如果后端传递了JSON，那么我为什么需要将响应对象转换为JSON？

// test.js (node)

const testObj = {
    "test1": {
        "1": "Hello there"
   }
}


app.get('some-route', async(req,res) =>{
       res.send(testObj)
}

// front.js (React)

async someFunc(){
      const response = await fetch('/some-route');
      const data = await response.json(); //why?
}

- hello_there

---

无论后端是否也是JavaScript，数据都会作为字节通过网络传输，并以字符串形式接收，您始终需要将其解析为语言可以理解的内容（如JSON）。 - Washington Guedes

Answer 1

因为在前端，fetch API接收到的是一个缓冲区——一组字节，其中可能包含任何有效负载。它可以是图像、纯文本、文件或JSON有效负载。

了解后端将要发送的内容，您需要接收数据的缓冲区，然后对其执行.json() API，从而要求将缓冲区解释为表示JSON对象的序列化字符串，并使Javascript引擎评估（反序列化）该字符串为一个对象。 Fetch是一个多用途API，它没有关于服务器将要发送的有效负载的任何先前知识。您正在使用.json()函数指示它将有效负载视为JSON。

除了.json()之外，还有其他辅助方法来读取和解析各种其他可能的响应类型；例如，.text()用于纯文本，.formData()用于表单编码数据（类似于查询字符串值），.blob()和.arrayBuffer()用于访问返回数据的字节级别。根据您从API中期望的响应类型使用相应的方法。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

- Arash Motamedi

Answer 2

响应对象不是从后端发送的内容，而是一个响应对象。这就是Fetch API的工作方式。该响应对象将具有很多元数据和一些方法，包括.json，该方法需要一个响应流并读取它以完成操作。它返回一个Promise，用于解析正文文本作为JSON的结果。

如果您不想经历这两个步骤，只需编写此函数即可。

const fetchJson = async url => {
    const response = await fetch(url)
    return response.json()
}

然后像这样使用：

async someFunc(){
      const data = await fetchJson('/some-route')
}

- pteranobyte

Answer 3

一个响应对象不仅仅包含其JSON部分，还包括所有HTTP协议元素，例如头部，响应的状态等等。

当您使用res.json()时，您告诉代码仅从所有这些其他内容中分离出JSON部分。

为了更好地了解HTTP响应，建议您阅读此文档。请注意，此链接指向英文网页。

- Ed de Almeida

Answer 4

好问题！

当你从后端向前端发送数据时，你不仅仅是发送你在testObj中创建的数据负载。实际返回的是一个响应对象，它看起来会像这样：

{
  type: "cors",
  url: "http://some-url.com/some-api",
  redirected: false,
  status: 200,
  ok: true,
  body: ReadableStream,
  ...
  headers: Headers,
  json: json(),
  ...
}

response.json的值是响应对象中的body反序列化方法。您可以自己看看；在删除.json()部分后，尝试从示例中console.log(data)，然后您将完整查看响应对象。

正如您所看到的，响应的主体 - 或者您从服务器发送的有效负载 - 以ReadableStream对象的形式由客户端接收，然后需要在整个对象到达客户端后进行反序列化。 response.json()方法只是将响应.body ReadableStream对象从序列化的字节数据反序列化为JSON，然后您可以在应用程序中解析它。

- cloake