후발대교육 2-2 JSON

JSON

js가 해석을 가장 쉽게하는 방식이 object와 array이다.

객체에는 속성과 메서드가 있다.
지금 다루는 객체는 promise의 형태를 가진 객체이다.
promise 객체는 비동기 통신을 위한 객체라고 보면 된다.
그래서 통신 이후 일어날 일들에 대한 !! 메서드 !! 를 가지고 있음.
통신이 성공 했을 때 -> then
통신이 실패했을 떄 -> catch

fetch("https://jsonplaceholder.typicode.com/todos/1").then((res) => {
  console.log(res);
});

res는 위 url로 통신을 요청했을 때 받은 응답값이 res에 담겨있는 것임

fetch("https://jsonplaceholder.typicode.com/todos/1")
  // then 통신이 끝나고 가져온 then, ㄱes는 통신 후 가져온 값
  .then(function (res) {
    return res.json();
  })

  // 이 then은 json()을 수행한 결과(body부분만 가져오기를 수행)
  // 그래서 data는 json()처리를 한 후 가져온 body 부분임
  .then(function (data) {
    console.log(data);
  });

// res : 받아온 전부를 가지고 있는 'promise' 객체
// json이라는 메서드 : body에 있는 정보들을 promise 객체 형태로 가지고 오는 놈
// 바디부분만 가지고 온 것을 성공 했으면

#과제 JSON 콘솔로 뿌려보는 것 까지

데이터를 요청할 때는 비동기 통신을 이용해야한다.

그 중 fetch는 url을 가져오는 비동기통신이다.

fetch 를 가져오는게 느려서 console.log 가 너무 일찍 찍히기 때문에 결국 안찍힌다.
그러기 때문에 콜백함수가 필요하다.

3 > 1 > 2 순으로 찍힌다.
1 찍히고 3초를 들어갔다가 1이 찍히고 1초 후에 2가 찍힌다.

순서대로 가야하는데 2번이 먼저 된다면, undefined가 된다.

결국 콜백지옥을 안만들기 위해서 then을 쓰는 것이다.
fetch(www.json.com).then()을 쓰게되면 fetch 다음으로 읽어오게 되는 것이다.

fetch에 담겨온 내용을 res에 담아서 출력하는 것임

Res(ponse)에는 별에별게 다 들어가있음
그래서 여기 body를 추출하기 위해서 JSON()을 사용한다.

res.json()을 이용하면서 return을 받아야, 다음에 then을 또 쓸 수 있음

res.json을 추출한게 json임
함수를 줄여보자

console.log 찍어보면 팬딩(대기중)의 값이 나옴

---