Json 데이터를 통신을 통해 가져올 때 생긴 오류

 

 

1. fetch 이후 then 안에서 response 값을 가져올 수 없다. 

await fetch('https://coactlist-default-rtdb.firebaseio.com/coaches.json')
  .then(res => console.log(res.json()));

아래는 위 코드 결과이다.

 

 

응답에 Object 처럼 보이는 값이 있어서 바로 가져오려고 했는데

실패했다.

 

아래 사진은 가져오려고 시도한 내용이다.

await fetch('https://coactlist-default-rtdb.firebaseio.com/coaches.json')
  .then(res => console.log(res.json()['name']));

---

 

예상으로는 res.json()을 통해 

Object를 그리기 전에 name에 접근하여서

undefined가 떴지 않았을까 하는 생각이 들었다. 

 

 

응답 객체 response에서 제공하는

json()을 통해 javascript 객체로 변환하는 시간을 기다렸다가

출력해보기로 시도해보자!

---

[response 객체의 JSON -> Object 기다렸다가 출력해보기]

let response = await fetch('https://coactlist-default-rtdb.firebaseio.com/coaches.json');
let result = await response.json();
console.log(result);

잘 나오는 걸 확인할 수 있다. 

 

추가로

JSON.parse() 과

.json() 

 

둘의 차이가 궁금해서 찾아봤다.

 

---

[JSON.parse() vs .json()]

 

JSON.parse는

header와 body를 둘 다 넣는 경우 파싱을 하지 못한다.

 

.json()의 경우에는

header와 body를 넣어도 body만을 파싱해서 리턴한다