将 JSON 从后端发送到前端

Question

我需要对 JSON 对象进行一些说明。 在我的节点后端，我收到一个 JSON 对象，在我完成我需要的键/值对之后，我将它发送到前端。 这就是我感到困惑的地方 - 我仍然需要通过 response.json() 将该响应对象转换为 json。 为什么？ 如果后端正在传递 JSON，那么为什么我需要将响应 obj 转换为 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?
}

Answer 1

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

知道后端将要发送的内容后，您需要接收数据的缓冲区，然后对它执行.json() API，本质上是要求将缓冲区解释为表示JSON对象的序列化字符串，并且然后让Javascript引擎将该字符串评估（反序列化）为对象。

Fetch是一个多功能API，对于服务器要发送的有效负载没有任何先验知识。 您正在指示它使用.json()函数将有效负载视为JSON。

除了.json() ，还有其他帮助程序方法可以读取和解析各种其他可能的响应类型；例如： 例如， .text()用于纯文本， .formData()用于表单编码的数据（类似于querystring值） .blob()和.arrayBuffer()用于对返回的数据进行字节级访问。 您将根据API期望的响应类型使用适当的方法。

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

Answer 2

响应对象不仅仅是其JSON部分。 它包含所有HTTP协议元素，例如标头 ，响应状态等。

当使用res.json()您正在告诉代码仅将JSON部分与所有其他所有内容分开。

要了解更多有关HTTP响应的信息，建议您阅读this 。

Answer 3

响应对象不是您从后端发送的对象，而是响应对象 。 这就是Fetch API的工作方式。 该Response对象上将包含许多元数据，以及一些方法，包括.json ，它将Takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON Takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON 。

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

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

并像这样使用它：

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

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的值是响应对象中的主体反序列化器方法。 您可以自己看到； 删除.json()位后，尝试从示例中获取console.log(data) ，然后全面了解一下响应对象。

如您所见，响应的主体（或您从服务器发送的有效负载）被客户端作为ReadableStream对象接收，一旦整个对象到达客户端，就需要反序列化该对象。 response.json（）方法只是将序列化的字节数据中的response.body ReadableStream对象反序列化为JSON，然后可以在应用程序中对其进行解析。

Answer 5

删除res.send中的“ this”

示例：res.send（testObj）