如何在 NodeJS 中使用 fetch 获取 API 数据

Question

I have this api which is returning arrays of values:

app.get("/events", (req, res) => {
  let response = null;
  let authObj = auth.authorize();

  setTimeout(() => {
    let result = controller.listEvents(authObj);

    result.then((data) => {
      response = data;
      console.log(data)
      res.json(response); // is this way of passing this data object to front-end right ???
    });
  }, 2000);
});

the result of console.log(data) above looks like below:

[
  {
    kind: 'calendar#event',
    etag: '"3203302285276000"',
    id: '69jte9qmoij84irjf2ktlqlqcd',
    status: 'confirmed',
    htmlLink: 'https://www.google.com/calendar/event?eid=NjlqdGU5cW1vaWo4NGlyamYya3RscWxxY2QgYmFudWthamFuYW5hdGhqYXlhcmF0aG5hQG0',
    created: '2020-10-02T15:05:42.000Z',
    updated: '2020-10-02T15:05:42.638Z',
    summary: 'What’s New in Lens 3.6.0',
  },
  {
    kind: 'calendar#event',
    etag: '"3200206562152000"',
    id: '_6l6jehjbbtol8him9194uqr88907cjaoct3japrle5a3ii9o6ds62t3kcln68pb5',
    status: 'confirmed',
    htmlLink: 'https://www.google.com/calendar/event?eid=XzZsNmplaGpiYnRvbDhoaW05MTk0dXFyODg5MDdjamFvY3QzamFwcmxlNWEzaWk5bzZkczYydDNrY2xuNjhwYjUgYmFudWthamFuYW5hdGhqYXlhcmF0aG5hQG0',
    created: '2020-09-14T17:07:55.000Z',
    updated: '2020-09-14T17:08:01.076Z',
    summary: 'Ansible Contributor Summit - New Contributor Workshops',
   
  }
]

And I want to pass this data to my front-end and iterate over it to display the summary , status .

Here's how I get this value to my front-end:

 const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then((res) => {
      console.log(res);
      setData(res.data);
    });
  });

But when I try to print data it gives undefined

Can someone please help me?

Thanks!

Answer 1

The parameter is a Response. It is not the result of the request, it only contains the headers. You need

 const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then(res => res.json()).then((res) => {
      console.log(res);
      setData(res);
    });
  }, []);

Remember the empty dependency array. You don't want to fetch every time the component renders, only once.

The result doesn't have a data property, it's just an array. So use setData(res); , not setData(res.data);

Answer 2

Give this a shot, because you are expecting json

const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then((res) => {  
    return res.json()
    }).then((responseJson) => {
       console.log(responseJson);
    });
  
  });