Request

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

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

생성자

Request.Request()

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

프로퍼티

Request.method (en-US) 읽기 전용

Request 메서드 (GET, POST 같은것들)을 포함합니다.

Request.url (en-US) 읽기 전용

Request의 URL을 포함합니다.

Request.headers (en-US) 읽기 전용

Request의 Headers (en-US)와 관련된 정보를 포함하고 있습니다.

Request.context (en-US) 읽기 전용

리퀘스트의 컨텍스트 (예: audio, image, iframe)을 포함하고 잇습니다.

Request.referrer (en-US) 읽기 전용

리퀘스트의 referrer 정보 (예:client)을 포함하고 있습니다.

Request.referrerPolicy (en-US) 읽기 전용

Request의 referrer policy 정보 (예: no-referrer)를 포함하고 있습니다.

Request.mode (en-US) 읽기 전용

Request의 모드를 (예: cors, no-cors, same-origin, navigate) 포함하고 있습니다.

Request.credentials 읽기 전용

Request의 자격 증명서(credentials) (예: omit, same-origin)를 포함하고 있습니다.

Request.redirect (en-US) 읽기 전용

Request의 처리 방법을 위한 모드 (예: follow, error, or manual)를 포함합니다.

Request.integrity (en-US) 읽기 전용

리퀘스트의 subresource integrity (en-US) 해쉬값(예:sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)을 포함합니다.

Request.cache (en-US) 읽기 전용

Request의 캐시모드를 (예: default, reload, no-cache) 포함합니다.

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

Body.body (en-US) 읽기 전용

ReadableStream을 바디 컨텐츠로 가져올 수 있는 간단한 게터 프로퍼티입니다.

Body.bodyUsed (en-US) 읽기 전용

Response에서 바디가 사용되었는가의 여부를 Boolean 형태로 표시합니다.

메서드

Request.clone() (en-US)

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

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

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객체가 반환됩니다.

참고: Body 함수는 한번밖에 실행할 수 없습니다.

두번째부터는 빈 문자열, 혹은 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

참고: Body의 타입은 Blob, BufferSource, 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);
  });

명세

Specification
Fetch Standard
# request-class

브라우저 호환성

BCD tables only load in the browser

관련항목