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()代表形式编码的数据（类似于查询字符串值），.blob()和.arrayBuffer()代表对返回数据的字节级访问。您将根据API期望的响应类型使用适当的方法。

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

Answer 2

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

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

要进一步了解HTTP响应，建议您阅读this。

Answer 3

响应对象不是您从后端发送的对象，而是Response object。这就是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。

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

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

并像这样使用它：

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

Answer 4

好问题！

从后端将数据发送到前端时，您不仅在发送在testObj中创建的数据有效载荷。实际返回的是一个response object，它看起来像：

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

其中response.json的值是响应对象中的主体反序列化器方法。您可以自己看到；删除console.log(data)位后，尝试从示例中.json()开始，您将全面了解响应对象。

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

Answer 5

删除res.send中的“ this”

示例：res.send（testObj）

从后端向前端发送JSON

5 个答案: