response.json()?

MSW를 공부하면서 handlers를 제작하던 중

내가 직접 response를 설정해 주고, fetch 받는 과정에서

몇가지 의문이 생겨 글을 쓰게 되었다.

 

 

1. 습관처럼 쓰는 fetch 코드

async funtion fetchFunction(){
   const response = await fetch('https://api.movie.com/data');
   const data = response.json();
   console.log(data);
}

 

지금까지 습관처럼 쓰던 fetch 코드는 위와 같았다.

누군가 만들어 놓은 API를 사용할 때, 그냥.. 이렇게 하면.. 데이터가 나왔었다...

 

습관처럼 쓰던 fetch에서 내가 놓치고 있던  중요한 두가지 포인트는

1. 위의 fetch는 기본적으로 GET 요청을 보낸다

2. response.json()가 구체적으로 무슨 과정으로 data를 가져다 주는지 모른다

는 것이었다.

 

 

2. POST request

async funtion fetchFunction(){
   const response = await fetch('https://api.movie.com/data', {
      method: "POST",
      headers: {
         'Content-Type': 'application/json',
      },
      body: JSON.stringify({ key: 'value' })
   });
   const data = response.json();
   console.log(data);
}

 

위와 같이 method 옵션에 POST, PUT, DELETE를 명시적으로 설정하여,

다른 HTTP 메서드를 사용할 수 있다.

headers와 body도 구체적으로 설정할 수 있다.

 

 

3. response

fetch API는 Response 객체를 반환한다.

Response 객체는 서버에서 받은 HTTP 응답을 의미한다.

 

객체의 주요 속성은 아래 글에서 확인!

https://samdasoo2l.tistory.com/9

1. http (서버제작 level 1) [express]

 

중요한 것은 Response 객체에는 속성만이 아니라 메서드도 존재한다는 것이다.

객체에서 body 부분은 응답 본문이다.

하지만 이 부분은 ReadableStream 객체이다.

이 객체를 읽기 위해서는 Response 객체가 제공하는 메서드를 통해서 데이터를 추출해야 한다.

 

 

주요 메서드는 아래와 같다.

1. json() : 응답 본문을 JSON으로 파싱하여 JavaScript 객체로 반환합니다. Promise를 반환하므로 then을 사용해 결과를 처리합니다. (내부적으로 JSON.parse()를 사용한다.)

2. text() : 응답 본문을 텍스트로 반환합니다. 이 역시 Promise를 반환합니다.

3. blob() : 응답 본문을 바이너리 데이터(Blob)로 반환합니다.

4. formData() : 응답 본문을 FormData 객체로 변환합니다.

5. arrayBuffer() : 응답 본문을 ArrayBuffer 객체로 변환합니다.