[mdn] fetch로는 데이터를 바로 사용할 수 없음 (json()에 대하여)

fetch를 사용할 땐 2단계를 거쳐야함

1. 올바른 url로 요청을 보내기
2. 오는 응답에 대해 json() 해주기

(axios는 json() 과정을 자동으로 해주는 셈)

 

json()은 Response 스트림을 가져와 스트림이 완료될 때까지 읽는다.

그리고 다 읽은 body의 텍스트를 Promise 형태로 반환한다.

fetch(url넣어서 요청)
.then((res) => res.json()) // Promise 반환
.then((data) => console.log(data)) // 서버에서 주는 데이터가 출력됨

 

mdn에 따른 json 메소드의 정의 

- json() 메소드는 Response 인터페이스의 메소드이다.

- json() 메소드는 Response 스트림을 가져와서 완료할 때까지 읽는다.

- json() 메소드는 body 안의 text를 파싱한 결과를 Promise 형태로 반환한다.

 

Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object.

 

json()이라고 이름은 되어있지만, 그 결과가 JSON이 아닌 것에 주의하자.

대신 JSON을 input으로 가져와서 파싱한다음 JavaScript 객체로 생성하는 것이다.

(과거에 이 부분이 기억에 남아서 json() 메소드가 결과가 JSON이 아니라는 것만 어렴풋이 기억났음..

그리고선 fetch()를 안쓴지 오래되서 기억이 안났다.)

 

결론

fetch를 통해 api콜을 할땐 json() 단계를 거쳐야한다. 

- 이름만 json 메소드이지 사실 js 객체(프로미스 객체)를 리턴함

- 서버의 응답결과에서 body 부분이 json 형태일때 사용하는 것임

Parameter

없음

 

Return Value

Promise 객체

 

정보 출처: 

 

https://developer.mozilla.org/en-US/docs/Web/API/Response/json