Request() 생성자는 새로운  Request 객체를 생성하도록 도와줍니다.

문법

var myRequest = new Request(input, init);

파라미터

input
취득한 리소스를 정의합니다. 이하의 값을 파라미터로 넣을 수 있습니다.
  • 취득하고 싶은 리소스의 URL을 담은 {domxref("USVString")}}.
  • Request 객체의 클론 생성을 위해 입력할 Request 객체. 기존의 request 객체로 새로운 동일한 객체를 생성할때, 다음과 같은 보안에 관련된 예외가 검출될 수 있습니다.
init Optional
리퀘스트를 적용할 커스텀 설정을 포함한 옵션오브젝트. 설정 가능한 옵션은 다음과 같습니다.
  • method: GET, POST과 같은 리퀘스트 메소드.
  • headers: Headers객체 또는 ByteString를 포함하는 리퀘스트에 추가하는 헤더.
  • body: 리퀘스트에 추가할 바디.  Blob이나, BufferSource, FormData, URLSearchParams, USVString, 또한 ReadableStream 객체를 사용할 수 있습니다.Request객체가 GET이나 HEAD메서드를 사용하는 경우, 바디를 포함하지 않습니다.
  • mode: Request에서 사용할 모드. cors, no-cors, same-origin, 또한 navigate이 사용 가능하며, 기본값은 cors입니다. 47버전 이전의 크롬에서는 기본값이 no-cors 이며 크롬 47버전 이후로 same-origin가 사용 가능하게 되었습니다.
  • credentials: Request에서 사용할 자격 증명서(Request Credential)입니다.omit, same-origin, 또는 include를 사용할 수 있습니다.기본값은 omit.이며, 크롬 47 이전의 기본값은 same-origin 입니다. 크롬 47 이후로부터include가 사용 가능하게 되었습니다.
  • cache: Request에서 사용할 cache mode 입니다.
  • redirect: Request에서 사용할 리다이렉트 모드입니다. follow, error, manual.이 사용 가능합니다. 크롬 47 이전 버전에서의 기본값은 manual 이며, 47 이후로부터 follow 가 사용 가능하게 되었습니다.
  • referrer: no-referrer나 client, URL을 지정하는 USVString입니다.. 기본값은 client입니다.
  • integrity: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=같은 Request의 하위 리소스 무결성(subresource integrity) 값을 포함합니다.

에러

타입 내용
TypeError Firefox 43부터, http://user:password@example.com와 같인 credential을 포함하는 경우 Request() 는 타입 에러를 반환합니다.

예시

 

Fetch Request example에서는, 생성자를 사용해 새로운 Requst 객체를 생성하고 나서 GlobalFetch.fetch인터페이스를 이용해 Request로 읽어온 결과를 취득하고 있습니다. 특정 사진을 가져와서 사용할 수 있게 만들기 위해서  MIME타입을 설정하고, Response의 Body.blob를 반환합니다. 그 후로 오브젝트 URL을 생성해 <img>요소를 표시하도록 합니다. Fetch Request live를 참고해주시기 바랍니다.

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});

Fetch Request with init example에서는 fetch()를 실행할 때 마다, init객체를 전달하는 것 이외에는 거의 동일한 기능을 수행합니다. Fetch Request init live 를 참조해주시기 바랍니다.

var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg',myInit);

fetch(myRequest).then(function(response) {
  ... 
});

동일한 효과를 얻기 위해 fetch 호출자에 init객체를 전달하는 것에 주목해주시기 바랍니다. 예를 들면...

fetch(myRequest,myInit).then(function(response) {
  ...
});

Request 객체ㅡ이 클론을 생성하기 위해서 Request() 생성자에 Request 를 전달하고 있습니다.(이것은  clone() 메서드의 호출자와 같습니다.)

var copy = new Request(myRequest);

노트:마지막의 예시는 ServiceWorkers안에서만 사용 가능합니다。

사용

사용 상태 꼬릿말
Fetch
The definition of 'Request()' in that specification.
Living Standard  

브라우저 지원현황

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

기능 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
기본 서포트 42.0 [1]
 
39 (39) [2] No support

29 [3]

No support
스트리밍 리스폰스 바디 43.0 ? ? ? ?
기능 Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
기본 지원 No support 42 [1] No support No support No support No support No support 42.0 [1]
스트리밍 리스폰시브 바디 No support 43.0  ? ? ? ? ? 43.0 

[1] 초기 파라미터의 기본값의 일부는 Chrome 47부터 변경되었스빈다. 상세한 내용은 프로퍼티 섹션을 참고해주시기 바랍니다.

[2] 34는 설정에서 변경할 수 있습니다.

[3] 28는 설정에서 변경할 수 있습니다.

관련항목

 

  •  

문서 태그 및 공헌자

이 페이지의 공헌자: BANIP
최종 변경자: BANIP,