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

문법

var myRequest = new Request(input, init);

파라미터

input

취득한 리소스를 정의합니다. 이하의 값을 파라미터로 넣을 수 있습니다.* 취득하고 싶은 리소스의 URL을 담은 {domxref("USVString")}}.

• Request 객체의 클론 생성을 위해 입력할Request 객체. 기존의 request 객체로 새로운 동일한 객체를 생성할때, 다음과 같은 보안에 관련된 예외가 검출될 수 있습니다.

initOptional

리퀘스트를 적용할 커스텀 설정을 포함한 옵션오브젝트. 설정 가능한 옵션은 다음과 같습니다.*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) 값을 포함합니다.

에러

예시

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안에서만 사용 가능합니다。

명세서

브라우저 지원현황

관련항목

• ServiceWorker API
• HTTP access control (CORS)
• HTTP