Request

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017년 3월⁩.

* Some parts of this feature may have varying levels of support.

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() 생성자로 스크립트와 같은 디렉토리에 위치하는 이미지 파일에 대한 새로운 요청을 생성하고, 해당 요청의 몇몇 속성을 반환합니다.

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;

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

그 다음엔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);  });