Как правильно показывать данные, запрашиваемые с сервера на клиенте - PullRequest
Новая
       15

Как правильно показывать данные, запрашиваемые с сервера на клиенте

0 голосов
/ 25 июня 2018

Когда я делаю это на сервере: 

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) на / браузер console.logging правильноно на /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);
});

Я получаю правильный ответ от пользователей, отправленных на сервер, но запрос кажетсяберут целую вечность, и у почтальона истекает время.Я не могу увидеть ответ, зарегистрированный в браузере.но это определенно правильно на сервере

мой главный вопрос: правильно ли я делаю запрос на сервере?и как мне заставить его показывать на клиенте (без тайм-аута)?

1 Ответ

0 голосов
/ 25 июня 2018

Таким образом, проблема находится на сервере. Вы используете 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); 
    });
...