게시 됨 업데이트 됨web1분안에 읽기 (약 184 단어)

reqres.in으로 ajax 연습하기

  • Reqres 에서 다양한 api를 제공하고있다
  • cors를 허용하기 때문에 localhost에서도 요청을보내고 응답을 받을 수 있다
  • ajax 연습이나, 간단한 앱을 만들 때, 서버를 만들지 않고,
  • reqres에서 제공하는 api를 사용할 수 있겠다

get api

https://reqres.in/api/users?page=2 // 유저 목록 2페이지 보기
https://reqres.in/api/users/2 // 2번 유저 보기
https://reqres.in/api/users/23 // 23번 유저 보기(없는 유저)

// products보기, products 부분은 어떤 문자열로든 치환이 가능해서 원하는 느낌의 문자열을 적어주면된다
https://reqres.in/api/products
https://reqres.in/api/products/1

 게시 됨 업데이트 됨web2분안에 읽기 (약 273 단어)

fetch api 연습

1
2
3
4
5
6
7
8
9
10
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);
  });

fetch api 써먹기

users router
1
2
3
4
5
let users = [];

app.get('/users', (req, res) => {
  return res.json(users);
});
fetch api
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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가 간단하고 간결한 것 같다

카테고리

아카이브

광고

×