Question

在服务器上执行此操作时：

app.get("/users", (req, res) => {
  console.log("a get request");
  var tryFetch = { myString: "I am working fetch" };
  res.json(tryFetch);
});

并在客户端上

class Example extends React.Component {
  async componentDidMount() {
    console.log("mounting...");
    const response = await fetch("/users");
    console.log(response, "res");
    const responseJson = await response.json();
    console.log(responseJson, "this is the data....");
  }

场景A）在浏览器/正在控制台。记录正确的内容，但在/users处，浏览器主体中显示json。为什么？

场景B）

我在服务器上执行此操作

app.get("/users", (req, res) => {
  console.log("a get request");
  var getData = await fetch("https://jsonplaceholder.typicode.com/users");
  var response = await getData.json();
  console.log(response, "the response");
  res.send(json);
});

我收到了发送到服务器的用户的正确响应，但是该请求似乎需要很长时间才能完成，并且邮递员已超时。我看不到浏览器中记录的响应。但在服务器上绝对正确

我的主要问题是：我是否在服务器上正确发出请求？以及如何使它显示在客户端上（没有超时）？

Answer 1

所以问题出在服务器上您在这里使用res.send(json)：

app.get("/users", (req, res) => {
  console.log("a get request");
  var getData = await fetch("https://jsonplaceholder.typicode.com/users");
  var response = await getData.json();
  console.log(response, "the response");
  res.send(json); // <---
});

它的基本作用是将'json'发送回客户端，客户端只渲染它。而是使用res.json()将json作为回复发送给客户端。所以您想要的是：

app.get("/users", (req, res) => {
      console.log("a get request");
      var getData = await fetch("https://jsonplaceholder.typicode.com/users");
      var response = await getData.json();
      console.log(response, "the response");
      res.json(response); 
    });

如何在客户端上正确显示从服务器请求的数据

1 个答案: