Fetch API Request

 

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.

 AJAX를 구현하는 방법은 여러 가지 방법이 존재하는데,  기존의 XMLHttpRequest, jquery의 $(). ajax, 가장 최신의 방법이라고 할 수 있는 Fetch API입니다. 

 

이러한 여러 API중 Fetch API는 리소스 취득을 위한 인터페이스가 정의되어 있기 때문에, 좀 더 강력하고, 유연한 조작이 가능하다고 합니다.

 

Fetch에는 일반적인 오브젝트로 Request와 Response가 포함되어 있습니다.

그중 Request객체 부터 차근차근 알아볼 생각입니다.

 

Request 객체

 

- Fetch API의 request는 요청 리소스를 표현해주는 인터페이스입니다.

 

Request객체의 속성에는 다음과 같이 구성되어 있습니다.

 

속성	설명
Request.method	Request의 요청방법을 나타내는 값을 String으로 반환해줍니다. (post, get, put ...)
Request.url	Request의 URL을 포함합니다.
Request.headers	Request의 headers의 객체를 반환합니다. Requset객체를 생성자를 통해 사용하는 일은 별로 없지만 다음과 같이 활용될 수 있습니다. const headers = new Headers(); headers.append('Content-type', 'application/json''); const requestInit = {     method : 'GET',     headers : headers,     cache    : 'default' }; const request = new Request(''/example/file01, requestInit); const contentType = request.headers.get('Content-Type'); // 'application/json';
Request.context	Request의 컨텍스트를 표현합니다.  즉 요청중인 콘텐츠의 유형을 설명하는 문자열을 반환합니다. (ex : audio, document, font ,ifraem, image)
Request.credentials	cross-origin 요청의 경우, user agent가 다른 도메인으로 cookie 들을 전달해야 하는지, 아닌지를 나타낸다.  omit : cookies 전송하거나, 받지 않는다. same-origin : URL이 호출 script와 동일 출처에 존재한다면 user credentials 를 전송하며, default 값이다. include : cross-origin 호출이라 할지라도, 언제나 user credentials를전송한다.   * user agent : 대개 웹 브라우저를 뜻한다.
Request.cache	request가 브라우저의 HTTP 캐시와 상호작용하는 방식을 제어합니다. default - 브라우저는 http 캐시에서 일치하는 요청을 찾습니다. 일치한다면, 캐시에서 반환되지만, 오래된 경우 서버에 조건부 요청을 보내 리소스가 최신인지 확인하며, 최신이아니라면 다운로드되고 캐시가 업데이트 됩니다.  no-store - 브라우저는 캐시를 먼저 확인하지 않고, 서버에서 리소스를 가져오고 캐시를 업데이트 하지 않습니다. reload - 브라우저는 캐시를 확인하지않고 서버에서 리소스를 가져온 후 캐시를 업데이트 합니다. no-cache - 브라우저는 HTTP 캐시에서 일치하는 요청을 찾는다.  이 값은 defualt와 같습니다.

또한 request에는 body의 내용이 담겨서 전송되기 때문에 body에도 접근할 수 있습니다.

 

 

이러한 Request객체들은 fetch()의 매개변수로 전달하는 것으로 사용될 수 있습니다.

const fileRequest = new Request('http://localhost/image/image1.jpg');
const downImage = '';

fetch(fileRequest)
	.then( response => resonse.blob())
	.then( blob => {
    	downImage = URL.createObjectURL(blob);  //주어진 객체를 가리키는 URL을 DOMString으로 반환합니다.
        										// 호출마다 새로운 객체 URL을 생성하기 때문에 사용하지
                                                //않을 땐 URL.revokeObjectURL() 로 할당을 해제해야합니다.
    })

 

 

 * payload : body에 담기는 data