Fetch API Response

request, response객체를 활용할 수 있는 fetch API에서 Response객체가 어떻게 구성되어 있는지 알아보자.

 

Fetch API의 Response 인터페이스는 요청에 대한 응답을 나타냅니다.

 

생성자를 통해 Response객체를 생성할 수 있지만, Response는 여러 API 작업의 결과로 Response객체가 반환될 가능성이 더 높습니다. 

 

속성 및 메서드	설명
Response.body	ReadableStream의 내용
Response.headers	응답 Headers와 관련된 객체입니다.
Response.ok	응답이 200, 성공했는지 여부를 나타내는 boolean 입니다.
Response.redirected	이 속성은 Response의 응답이 리다이렉션된 요청의 결과인지 여부를 나타냅니다. redirect의 기본 속성값은 follow로 자동으로 리다이렉션을 따르는데, error로 설정할 시 오류와 함께 중단됩니다. 이값은 fetch의 init에서 사용할 수 있습니다. 혹은 reposen의 redirected속성에서 리다이렉션 여부로 필터링이 가능하지만, 위조된 경우를 방지하기 위해 초기 값설정을 권장합니다.
Response.status	응답의 상태 코드입니다.
Response.json()	응답 본문 텍스트를 JSON으로 구문 분석한 결과로 resovles를 포함한 Promise 객체를반환합니다. 따라서 then을 통해 받아야 하며, 그 결과 값으로 json구문을 분석하여 javascript 객체를 생성한 결과입니다. json으로 만드는 것이아닌,  객체로 파싱한 결과라는 것을 기억해야 합니다.  기존의 JSON.parse의 데이터가 많을 경우 동기적으로 처리했지만, promise객체를 반환하는 것으로 보아, 비동기적으로 json데이터를 파싱하는 것 같습니다.
Response.text()	응답 본문의 텍스트 표현으로 보이는 Promise객체를 반환합니다.  이경우 String으로 반환하며 항상 UTF-8로 디코딩된다는 것을 명심해야 합니다.  서버가 전달한 text데이터를 읽는데, 서버에서 텍스트를 UTF-8로 인코딩을 하지 않았을 경우 텍스트가 깨지는 현상을 경험하실 것입니다. 그 기분은 짜릿합니다.

* Reponse.blob() : blob()메서드는 스트림을 Response로 가져와, Response가 완료할 때까지 읽습니다. 또한 resolves를 포함한 promise객체를 반환합니다.

 

fetch('css')
	.then( res => response.blob())
    .then( blob => {
    	const objURL = URL.createObjectURL(blob);
        console.log(objURL);
    });

fetch api를 통하여 동일 위치에있는 css파일을 가져옵니다. 성공 시, Blob을 사용하여, 응답을 읽고, 해당 URL을 콘솔로 찍습니다.

 

 

fetch API에서 Response 를 어떻게 활용하는지 예제

 

const getData = async () => {
	const response = await fetch('data'); // 성공적으로 맞췄을 경우, response객체를 생성합니다.
    
    if(response.ok){  //status == 200 
    	const jsonValue = await response.json(); -> body로 부터 json값을 객체로 파싱합니다.
        return Promise.resolve(jsonValue);
      }else {
      	return Promise.reject('not found file');
      } 
}

getData().then(console.log).catch(console.log);

 

여기서 알 수 있는건, fetch API를 통해 데이터를 받아오는 경우 그 데이터를 바로 접근할 수 없으며,  성공 시 resovle에 response 객체를 담아서 전달해주며, 실패 시 reject(error 예외 객체)를 전달한다는 점!

 

 

 

추가) ReadableStream

 

 Streams API의 ReadableStream 인터페이스는 바이트 데이터를 읽을 수 있는 스트림을 제공합니다. Fetch API는 Response의 객체의 body속성을 통하여, ReadableStream의 구체적인 인스턴스를 제공합니다.

 

Streams API 는 javascript를 이용해 네트워크를 통해 전송된 데이터 스트림에 접근하여 원하는 대로 처리가 가능한 api를 제공합니다. 

Streaming은 네트워크를 통해 받은 리소스를 작은 조각으로 나누어, bit단위로 처리합니다. 이는 브라우저가 서버로부터 받은 자원을 웹페이지에 표현할 때 자주 사용하는 방법입니다.

이전에는 비디오나 텍스트파일 등의 리소스를 처리하기 위해선 우선, 전체 파일을 다운로드한 후 알맞은 포맷으로 파싱 된 후에야, 전송된 전체 데이터를 처리할 수 있었습니다.

Stream이 도입된 후 모든 것이 변경되었는데, 이제 Buffer, String 또는 blob 없이도, javascript를 통해 Raw Data를 비트 단위로 처리할 수 있습니다. 

stream의 장점은 더 존재하는데, Stream의 시작 또는 종료를 감지할 수 있으며, 여러 stream을 엮어서 에러를 처리하거나 필요한 경우 stream을 취소할 수도 있습니다. 또한 stream이 읽어 들이는 속도에 따라 반응할 수도 있습니다.

 

Stream의 주요한 기본 사용법은 응답 데이터를 stream으로 만드는 것입니다. fetch api를 통해 정상적으로 전달된 응답 Body는 ReadableStream의 구현체로 반환됩니다. 이경우 ReadableStream.getReader() 를 통해 Reader 객체를 얻어 데이터를 읽을 수도 있으며, Readble.cancel()을 통해, Stream을 취소하는 것이 가능합니다.

WritableStream을 사용하면 Stream에 데이터를 쓰는 것도 가능합니다.