fetch api 연습

fetch('http://localhost:3000/users')
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(JSON.stringify(myJson));
  })
  .catch(function (error) {
    console.log(error);
  });

• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

fetch api 써먹기

users router

let users = [];

app.get('/users', (req, res) => {
  return res.json(users);
});

fetch api

function getUserList() {
  //   listbox 초기화
  let newListbox = document.createElement('li');
  newListbox.innerHTML = `<li class="list-group-item head">User List</li>`;

  const url = '/users';
  const fetchResponsePromise = fetch(url);
  fetchResponsePromise
    .then((response) => {
      if (response.status === 200) {
        return response.json();
      } else {
        throw new Error('Something went wrong on api server!');
      }
    })
    .then((response) => {
      console.log(`fetch`, response);
      let i = 0;
      for (const key in response) {
        i++;
        if (response.hasOwnProperty(key)) {
          const element = response[key];

          const new_li_element = document.createElement('li');
          new_li_element.className = 'list-group-item';
          new_li_element.appendChild(document.createTextNode(element));
          newListbox.appendChild(new_li_element);
        }
      }
      listbox.innerHTML = newListbox.innerHTML;
    })
    .catch((error) => {
      console.error(error);
    });
}

• users라는 라우터에서는 유저배열을 반환한다
• 유저배열을 json으로 받는데, 그걸 받아서 화면에서 유저목록을 갱신한다
• 나는 ajax하면 xhr객체를 만들어서 가져오곤 했는데 이번에는 fetch를 사용해 보았다
• fetch가 간단하고 간결한 것 같다

• 이 코드가 들어 있는 프로젝트 : Chat App (NodeJs & Socket.IO )