Request

생성자

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 표현으로 이행하는 프로미스를 반환합니다.

예제

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

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

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

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

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

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

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;

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

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);
  });

명세서

브라우저 호환성

같이 보기

• Service Worker API
• HTTP 접근 제어 (CORS)
• HTTP