Request
=======

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

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

생성자
---

`Request()`

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

인스턴스 속성
-------

`Request.body` (en-US) 읽기 전용

본문 내용의 `ReadableStream`입니다.

`Request.bodyUsed` (en-US) 읽기 전용

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

`Request.cache` 읽기 전용

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

`Request.credentials` 읽기 전용

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

`Request.destination` (en-US) 읽기 전용

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

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

요청에 연관된 `Headers` (en-US) 객체입니다.

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

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

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

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

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

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

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

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

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

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

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

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

`Request.signal` (en-US) 읽기 전용

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

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

요청 URL입니다.

인스턴스 메서드
--------

`Request.arrayBuffer()` (en-US)

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

`Request.blob()` (en-US)

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

`Request.clone()` (en-US)

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

`Request.formData()` (en-US)

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

`Request.json()` (en-US)

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

`Request.text()` (en-US)

요청 본문의 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 with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

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