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.

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

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

새로운 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
# request-class

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Request
Request() constructor
cross-origin referrer stripped out and navigate mode converted to same-origin when constructor created from existing Request object.
init.attributionReporting parameter
Experimental
init.browsingTopics parameter
ExperimentalNon-standard
init.duplex parameter
Experimental
init.keepalive parameter
init.priority parameter
init.referrer parameter
Send ReadableStream in request body
Experimental
Consume ReadableStream as a response body
arrayBuffer
blob
body
bodyUsed
bytes
cache
cache.only-if-cached
clone
credentials
Default value same-origin
destination
duplex
Experimental
formData
headers
integrity
isHistoryNavigation
json
keepalive
method
mode
navigate mode
redirect
referrer
referrerPolicy
signal
targetAddressSpace
Experimental
text
url

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

같이 보기