Fetch API의 Request는 리퀘스트 리소스를 표현해주는 인터페이스입니다. 

Request.Request() 생성자 메서드를 사용하는 것으로, 새로운 Request오브젝트를 생성할 수 있습니다. 이 인터페이스는 그리 자주 사용되지 않는 것으로 service worker의 FetchEvent.request와 같은 별개의 API와 만나는 경우가 더 잦을 것입니다.

생성자

Request.Request()
새로운 Request 객체를 생성합니다.

프로퍼티

Request.method Read only
Request 메서드 (GET, POST 같은것들)을 포함합니다.
Request.url Read only
Request의 URL을 포함합니다.
Request.headers Read only
Request의 Headers와 관련된 정보를 포함하고 있습니다.
Request.context Read only  
리퀘스트의 컨텍스트 (예: audio, image, iframe)을 포함하고 잇습니다.
Request.referrer Read only
리퀘스트의 referrer 정보 (예:client)을 포함하고 있습니다.
Request.referrerPolicy Read only
Request의 referrer policy 정보 (예: no-referrer)를 포함하고 있습니다.
Request.mode Read only
Request의 모드를 (예: cors, no-cors, same-origin, navigate) 포함하고 있습니다.
Request.credentials Read only
Request의 자격 증명서(credentials)  (예: omit, same-origin)를 포함하고 있습니다.
Request.redirect Read only
Request의 처리 방법을 위한 모드 (예: follow, error, or manual)를 포함합니다.
Request.integrity Read only
리퀘스트의 subresource integrity 해쉬값(예:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)을 포함합니다.
Request.cache Read only
Request의 캐시모드를 (예: default, reload, no-cache) 포함합니다.

RequestBody를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.

Body.body Read only
ReadableStream을 바디 컨텐츠로 가져올 수 있는 간단한 게터 프로퍼티입니다.
Body.bodyUsed Read only
Response에서 바디가 사용되었는가의 여부를 Boolean 형태로 표시합니다.

메서드

Request.clone()
Request의 복사본을 생성합니다.

RequestBody를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.

Body.arrayBuffer()
ArrayBuffer에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
Body.blob()
Blob에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
Body.formData()
FormData에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
Body.json()
JSON에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
Body.text()
USVString에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.

NoteBody 함수는 한번밖에 실행할 수 없습니다. 두번째부터는 빈 문자열, 혹은 ArrayBuffer이 반환됩니다.

예시

다음의 예시들은 Request를 이용해 스크립트와 같은 디렉터리에 존재하는 사진의 여러가지 정보를 불러오는 방법입니다. Request() 생성자를 사용하여 새로운 Request를 생성하여 몇몇 몇 프로퍼티를 반환합니다.

const myRequest = new Request('http://localhost/flowers.jpg');

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit

GlobalFetch.fetch()의 매개변수에 Request 객체를 전달하는것으로 then 파라미터를 이끌어낼 수 있습니다. 아래는 그에대한 예시입니다.

fetch(myRequest)
  .then(response => response.blob())
  .then(blob => {
    myImage.src = URL.createObjectURL(blob);
  });

아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터 및 본문 내용이 포함 된새 요청을 만듭니다.

 

아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터와 Body의 컨텐츠를 읽어올 수 있습니다.

const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
 
const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true

Note: Body의 타입은 Blob, BufferSource, FormData, URLSearchParams, USVString 혹은 ReadableStream로만 올 수 있습니다.  따라서 payload에 JSON객체를 추가하려면 해당 객체를 문자열로 지정할 수 있습니다.

그런 다음 Request 객체를 매개 변수로 GlobalFetch.fetch() 호출에 전달하여 api 요청을 가져와 응답을 얻을 수 있습니다. 아래는 예시입니다.

fetch(myRequest)
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong on api server!');
    }
  })
  .then(response => {
    console.debug(response);
    // ...
  }).catch(error => {
    console.error(error);
  });

명세

명세 상태 코멘트
Fetch
The definition of 'Request' in that specification.
Living Standard Initial definition

브라우저 지원

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 Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
기본 지원 42 (Yes) 39 (39)
34
No support 28 No support
Request.body.formData 60 ? ? No support 47 No support
Request.integrity 46 (Yes) (Yes) No support 33 No support
Request.redirect 46 (Yes) (Yes) No support 33 No support
Constructor init can accept ReadableStream body 43 (Yes) No support[1] No support 33 No support
기능 Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
기본 지원 42 42 (Yes) (Yes) No support 28 No support
Request.body.formData 60 60 ? ? No support 47 No support
Request.integrity 46 46 ? (Yes) No support 33 No support
Request.redirect 46 46 ? (Yes) No support 33 No support
Constructor init can accept ReadableStream body 43 43 (Yes) No support[1] No support 33 No support

[1] 읽기전용 스트림은 파이어폭스에서 사용 가능하며, dom.streams.enabled와 javascript.options.streams 설정에 숨어있습니다.

관련항목

문서 태그 및 공헌자

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