Request

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

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

생성자

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

프로퍼티

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

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

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

메서드

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

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

Body.arrayBuffer() (en-US)
ArrayBuffer에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
Body.blob() (en-US)
Blob에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
Body.formData() (en-US)
FormData에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
Body.json() (en-US)
JSON에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.
Body.text() (en-US)
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() (en-US)의 매개변수에 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 (en-US), FormData, URLSearchParams, USVString 혹은 ReadableStream로만 올 수 있습니다.  따라서 payload에 JSON객체를 추가하려면 해당 객체를 문자열로 지정할 수 있습니다.

그런 다음 Request 객체를 매개 변수로 GlobalFetch.fetch() (en-US) 호출에 전달하여 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

브라우저 지원

BCD tables only load in the browser

관련항목