Request

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Fetch API의 Request 인터페이스는 리소스 요청을 나타냅니다.

새로운 Request 객체는 Request() 생성자로도 생성할 수 있지만, 보통은 서비스 워커의 FetchEvent.request처럼 다른 API 작업의 결과로서 만나게 됩니다.

생성자

Request()

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

인스턴스 속성

Request.body 읽기 전용

본문 내용의 ReadableStream입니다.

Request.bodyUsed 읽기 전용

요청의 본문이 사용됐는지 아닌지 나타내는 true 또는 false입니다.

Request.cache 읽기 전용

요청의 캐시 모드(default, reload, no-cache 등)입니다.

Request.credentials 읽기 전용

요청의 자격 증명(omit, same-origin, include 등)입니다. 기본 값은 same-origin입니다.

Request.destination 읽기 전용

요청의 목적지를 묘사하는 문자열을 반환합니다. 요청한 콘텐츠의 유형을 나타내는 문자열입니다.

Request.headers 읽기 전용

요청에 연관된 Headers 객체입니다.

Request.integrity 읽기 전용

요청의 하위 리소스 무결성 값(예시: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)입니다.

Request.method 읽기 전용

요청의 메서드(GET, POST 등)입니다.

Request.mode 읽기 전용

요청의 모드(cors, no-cors, same-origin, navigate 등)입니다.

Request.redirect 읽기 전용

리다이렉트 처리 방법입니다. follow, error, manual 중 하나입니다.

Request.referrer 읽기 전용

요청의 리퍼러(예시: client)입니다.

Request.referrerPolicy 읽기 전용

요청의 리퍼러 정책(no-referrer 등)입니다.

Request.signal 읽기 전용

요청에 연관된 AbortSignal을 반환합니다.

Request.url 읽기 전용

요청 URL입니다.

인스턴스 메서드

Request.arrayBuffer()

요청 본문의 ArrayBuffer 표현으로 이행하는 프로미스를 반환합니다.

Request.blob()

요청 본문의 Blob 표현으로 이행하는 프로미스를 반환합니다.

Request.clone()

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

Request.formData()

요청 본문의 FormData 표현으로 이행하는 프로미스를 반환합니다.

Request.json()

요청 본문을 JSON으로 파싱한 결과로 이행하는 프로미스를 반환합니다.

Request.text()

요청 본문의 text 표현으로 이행하는 프로미스를 반환합니다.

참고 : 요청 본문 함수는 오직 한 번만 실행할 수 있습니다. 이후의 호출은 빈 문자열 혹은 빈 ArrayBuffer로 이행할 것입니다.

예제

다음 코드 조각에서는 Request() 생성자로 스크립트와 같은 디렉토리에 위치하는 이미지 파일에 대한 새로운 요청을 생성하고, 해당 요청의 몇몇 속성을 반환합니다.

js
const request = new Request("https://www.mozilla.org/favicon.ico");

const url = request.url;
const method = request.method;
const credentials = request.credentials;

그 다음엔 fetch() 호출의 매개변수에 이 Request 객체를 제공하여 이미지를 취득할 수 있습니다.

js
fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });

다음 코드 조각에서는 Request() 생성자를 호출할 때, 본문을 바라는 API에 대한 요청을 위해 일부 설정과 본문 데이터를 제공합니다.

js
const request = new Request("https://example.com", {
  method: "POST",
  body: '{"foo": "bar"}',
});

const url = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;

참고 : 본문은 하나의 Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, ReadableStream, String 객체, 문자열 리터럴 등만 가능하므로 JSON 객체를 본문으로 보내려면 먼저 문자열화해야 합니다.

그 다음엔 fetch() 호출의 매개변수에 이 Request 객체를 제공하여 응답을 받을 수 있습니다.

js
fetch(request)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("API 서버에서 뭔가 잘못됐습니다!");
    }
  })
  .then((response) => {
    console.debug(response);
    // …
  })
  .catch((error) => {
    console.error(error);
  });

명세서

Specification
Fetch Standard
# request-class

브라우저 호환성

BCD tables only load in the browser

같이 보기