Javascript 在节点服务器和前端处理JSON响应

我有一个发送JSON响应的节点服务器，但为什么我必须在前端再次执行res.JSON才能使响应正常工作

另外，在前端处理回迁的理想约定是什么？比如我应该如何构造我的异步/等待函数

server.js

const express = require('express')
const path = require('path')
const bodyParser = require('body-parser')
const fetch = require('node-fetch')

const app = express()
const port = process.env.PORT || 5000

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

const TRANSLINK_TOKEN = 'j2bXKzENILvyoxlZ399I'
const TRANSLINK_URL = 'http://api.translink.ca/rttiapi/v1/buses?apikey='

// API routes
app.get('/buses/location', async (req, res) => {
  const apiURL = `${TRANSLINK_URL}${TRANSLINK_TOKEN}`
  try {
    const response = await fetch(apiURL, { headers: { 'Accept': 'application/json' }})
    const jsonResponse = await response.json()
    res.send(jsonResponse)
  }
  catch (e){
    console.log(e)
  }
})

app.listen(port, () => console.log(`Listening on port ${port}`))

App.js

  fetchLocation = async () => {
    let locationURL = "/buses/location"
    fetch(locationURL)
      .then(res => {
        if (res.ok) {
          res.json()
          .then( (result) => {
            this.setState({
              active_vehicles: result
            })
          })
        }
      })
  }

---

这只是fetch在FE中实现的本质。它不会自动解析对json的响应

见：

您可以使用第三方库为您处理内容类型，比如axios，或者如果您确信从服务器返回的所有内容都将是有效的JSON，您也可以编写一个简单的函数来包装fetch

顺便说一句，由于您已经在使用async，您应该使用wait而不是then/catch：

---

这只是fetch在FE中实现的本质。它不会自动解析对json的响应

见：

您可以使用第三方库为您处理内容类型，比如axios，或者如果您确信从服务器返回的所有内容都将是有效的JSON，您也可以编写一个简单的函数来包装fetch

顺便说一句，由于您已经在使用async，您应该使用wait而不是then/catch：

---

您必须执行res.json，因为HTTP响应的主体只是一个字符串。代码无法知道字符串的格式，除非您告诉它，这就是res.json的作用：您告诉代码将字符串响应解析为json并返回结果对象

至于结构，如果您已经在前端使用了异步函数，那么也应该使用wait there来帮助扁平化代码：

fetchLocation = async () => {
   let locationURL = "/buses/location";
   const res = await fetch(locationURL);
   if (res.ok) {
     const result = await res.json();
     this.setState({
       active_vehicles: result
      });
    }
  };

---

您必须执行res.json，因为HTTP响应的主体只是一个字符串。代码无法知道字符串的格式，除非您告诉它，这就是res.json的作用：您告诉代码将字符串响应解析为json并返回结果对象

至于结构，如果您已经在前端使用了异步函数，那么也应该使用wait there来帮助扁平化代码：

fetchLocation = async () => {
   let locationURL = "/buses/location";
   const res = await fetch(locationURL);
   if (res.ok) {
     const result = await res.json();
     this.setState({
       active_vehicles: result
      });
    }
  };

使用fetch，每次发出HTTP请求时都需要使用res.json

您的服务器正在向api.translink.ca发出GET请求。调用res.json时，它将处理在系统较低级别调用的异步任务，以实际接收和读取数据

您的客户机也在发出GET请求，但不是向api.translink.ca发出该请求，而是向您的主机发出该请求。如果您在自己的计算机上运行服务器，那么它将是localhost，完整的URL是localhost/bus/location。您正在发出另一个GET请求，这就是您需要再次调用res.json的原因

至于你的第二个问题，习俗是一个偏好的问题

wait只是一种语法上的糖，用来避免被称为wait的东西

只需将承诺中得到的最终值解析为期望的变量，并尽可能保持代码的可读性和整洁性

例如

更新您的代码：

fetchLocation = async () => {
  let locationURL = "/buses/location"
  let res = await fetch(locationURL);

  if (res.ok) {
    let result = await res.json();
    this.setState({ active_vehicles: result });
  }
};

使用fetch，每次发出HTTP请求时都需要使用res.json

您的服务器正在向api.translink.ca发出GET请求。调用res.json时，它将处理在系统较低级别调用的异步任务，以实际接收和读取数据

您的客户机也在发出GET请求，但不是向api.translink.ca发出该请求，而是向您的主机发出该请求。如果您在自己的计算机上运行服务器，那么它将是localhost，完整的URL是localhost/bus/location。您正在发出另一个GET请求，这就是您需要再次调用res.json的原因

至于你的第二个问题，习俗是一个偏好的问题

wait只是一种语法上的糖，用来避免被称为wait的东西

只需将承诺中得到的最终值解析为期望的变量，并尽可能保持代码的可读性和整洁性

例如

更新您的代码：

fetchLocation = async () => {
  let locationURL = "/buses/location"
  let res = await fetch(locationURL);

  if (res.ok) {
    let result = await res.json();
    this.setState({ active_vehicles: result });
  }
};

---

如果我在我的服务器中执行response.json，这会有什么作用吗？好像我还需要在前端再次解析它？不，它不会影响FE。通过网络传输数据时，json仍将转换为字符串。通常应用程序依赖于Content-Type头来决定如何解析字符串如果我在我的服务器中执行response.json，这有什么作用吗？好像我还需要在前端再次解析它？不，它不会影响FE。通过网络传输数据时，json仍将转换为字符串。通常应用程序依赖于Content-Type头来决定如何解析字符串如果我在我的服务器中执行response.json，这有什么作用吗？我仍然需要在前端再次解析它吗？您的服务器正在使用fetch从另一个API获取响应。它将以字节字符串的形式到达服务器，然后

---

需要告诉节点将其解析为JSON对象。然后，当您将其发送回客户机时，它将再次作为字符串发送，客户机需要将其解析回JSON。对象不能通过HTTP发送，必须先将其字符串化。您可以在服务器上使用res.text，它可以正常工作，因为它在传输过程中会被转换为文本，但无论哪种方式，您都需要解析两端的响应。它使用具有主体字符串和其他信息（如响应头）的响应对象进行解析。如果不使用res.text或res.json或类似工具，您只能访问完整的响应对象，而不能访问它的实际主体，这是您真正需要的数据。如果我在服务器中执行Response.json，这是否有任何作用？我仍然需要在前端再次解析它吗？您的服务器正在使用fetch从另一个API获取响应。这将以字节字符串的形式到达服务器，您需要告诉节点将其解析为JSON对象。然后，当您将其发送回客户机时，它将再次作为字符串发送，客户机需要将其解析回JSON。对象不能通过HTTP发送，必须先将其字符串化。您可以在服务器上使用res.text，它可以正常工作，因为它在传输过程中会被转换为文本，但无论哪种方式，您都需要解析两端的响应。它使用具有主体字符串和其他信息（如响应头）的响应对象进行解析。如果不使用res.text或res.json或类似工具，您只能访问完整响应对象，而不能访问它的实际主体，这是您真正需要的数据。