---
title: Request
slug: Web/API/Request
translation_of: Web/API/Request
---
<div>{{APIRef("Fetch")}}</div>

<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>의 <strong><code>Request</code></strong>는 리퀘스트 리소스를 표현해주는 인터페이스입니다. </p>

<p>{{domxref("Request.Request()")}} 생성자 메서드를 사용하는 것으로, 새로운 <code>Request</code>오브젝트를 생성할 수 있습니다. 이 인터페이스는 그리 자주 사용되지 않는 것으로 service worker의 {{domxref("FetchEvent.request")}}와 같은 별개의 API와 만나는 경우가 더 잦을 것입니다.</p>

<h2 id="생성자">생성자</h2>

<dl>
 <dt>{{domxref("Request.Request()")}}</dt>
 <dd>새로운 <code>Request</code> 객체를 생성합니다.</dd>
</dl>

<h2 id="프로퍼티">프로퍼티</h2>

<dl>
 <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
 <dd>Request 메서드 (<code>GET</code>, <code>POST</code> 같은것들)을 포함합니다.</dd>
 <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
 <dd>Request의 URL을 포함합니다.</dd>
 <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
 <dd>Request의 {{domxref("Headers")}}와 관련된 정보를 포함하고 있습니다.</dd>
 <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
 <dd>리퀘스트의 컨텍스트 (예: <code>audio</code>, <code>image</code>, <code>iframe</code>)을 포함하고 잇습니다.</dd>
 <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
 <dd>리퀘스트의 referrer 정보 (예:<code>client</code>)을 포함하고 있습니다.</dd>
 <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
 <dd>Request의 referrer policy 정보 (예: <code>no-referrer</code>)를 포함하고 있습니다.</dd>
 <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
 <dd>Request의 모드를 (예: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>) 포함하고 있습니다.</dd>
 <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
 <dd>Request의 자격 증명서(credentials)  (예: <code>omit</code>, <code>same-origin</code>)를 포함하고 있습니다.</dd>
 <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
 <dd>Request의 처리 방법을 위한 모드 (예: <code>follow</code>, <code>error</code>, or <code>manual</code>)를 포함합니다.</dd>
 <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
 <dd>리퀘스트의 <a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 해쉬값(예:<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)을 포함합니다.</dd>
 <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
 <dd>Request의 캐시모드를 (예: <code>default</code>, <code>reload</code>, <code>no-cache</code>) 포함합니다.</dd>
</dl>

<p><code>Request</code>는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.</p>

<dl>
 <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
 <dd>{{domxref("ReadableStream")}}을 바디 컨텐츠로 가져올 수 있는 간단한 게터 프로퍼티입니다.</dd>
 <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
 <dd>Response에서 바디가 사용되었는가의 여부를 {{domxref("Boolean")}} 형태로 표시합니다.</dd>
</dl>

<h2 id="메서드">메서드</h2>

<dl>
 <dt>{{domxref("Request.clone()")}}</dt>
 <dd><code>Request</code>의 복사본을 생성합니다.</dd>
</dl>

<p><code>Request</code>는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.</p>

<dl>
 <dt>{{domxref("Body.arrayBuffer()")}}</dt>
 <dd>{{domxref("ArrayBuffer")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
 <dt>{{domxref("Body.blob()")}}</dt>
 <dd>{{domxref("Blob")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
 <dt>{{domxref("Body.formData()")}}</dt>
 <dd>{{domxref("FormData")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
 <dt>{{domxref("Body.json()")}}</dt>
 <dd>{{domxref("JSON")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
 <dt>{{domxref("Body.text()")}}</dt>
 <dd>{{domxref("USVString")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
</dl>

<div class="note">
<p><strong>Note</strong>: {{domxref("Body")}} 함수는 한번밖에 실행할 수 없습니다. 두번째부터는 빈 문자열, 혹은 ArrayBuffer이 반환됩니다.</p>
</div>

<h2 id="예시">예시</h2>

<p>다음의 예시들은 Request를 이용해 스크립트와 같은 디렉터리에 존재하는 사진의 여러가지 정보를 불러오는 방법입니다. <code>Request()</code> 생성자를 사용하여 새로운 Request를 생성하여 몇몇 몇 프로퍼티를 반환합니다.</p>

<pre class="brush: js">const myRequest = new Request('http://localhost/flowers.jpg');

const myURL = myRequest.url; // http://localhost/flowers.jpg
const myMethod = myRequest.method; // GET
const myCred = myRequest.credentials; // omit
</pre>

<p>{{domxref("GlobalFetch.fetch()")}}의 매개변수에 Request 객체를 전달하는것으로 then 파라미터를 이끌어낼 수 있습니다. 아래는 그에대한 예시입니다.</p>

<pre class="brush: js">fetch(myRequest)
  .then(response =&gt; response.blob())
  .then(blob =&gt; {
    myImage.src = URL.createObjectURL(blob);
  });</pre>

<p>아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터 및 본문 내용이 포함 된새 요청을 만듭니다.</p>

<p> </p>

<p>아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터와 Body의 컨텐츠를 읽어올 수 있습니다.</p>

<pre class="brush: js">const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});

const myURL = myRequest.url; // http://localhost/api
const myMethod = myRequest.method; // POST
const myCred = myRequest.credentials; // omit
const bodyUsed = myRequest.bodyUsed; // true
</pre>

<div class="note">
<p><strong>Note:</strong> Body의 타입은 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} 혹은 {{domxref("ReadableStream")}}로만 올 수 있습니다.  따라서 payload에 JSON객체를 추가하려면 해당 객체를 문자열로 지정할 수 있습니다.</p>
</div>

<p>그런 다음 Request 객체를 매개 변수로 {{domxref("GlobalFetch.fetch()")}} 호출에 전달하여 api 요청을 가져와 응답을 얻을 수 있습니다. 아래는 예시입니다.</p>

<pre class="brush: js">fetch(myRequest)
  .then(response =&gt; {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong on api server!');
    }
  })
  .then(response =&gt; {
    console.debug(response);
    // ...
  }).catch(error =&gt; {
    console.error(error);
  });</pre>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">코멘트</th>
  </tr>
  <tr>
   <td>{{SpecName('Fetch','#request-class','Request')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_지원">브라우저 지원</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>기능</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>기본 지원</td>
   <td>{{CompatChrome(42)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(39)}}<br>
    34</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(28)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Request.body.formData</code></td>
   <td>{{CompatChrome(60)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(47)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Request.integrity</code></td>
   <td>{{CompatChrome(46)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(33)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Request.redirect</code></td>
   <td>{{CompatChrome(46)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(33)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Constructor <code>init</code> can accept <code>ReadableStream</code> <code>body</code></td>
   <td>{{CompatChrome(43)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOpera(33)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>기능</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>기본 지원</td>
   <td>{{CompatChrome(42)}}</td>
   <td>{{CompatChrome(42)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOperaMobile(28)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Request.body.formData</code></td>
   <td>{{CompatChrome(60)}}</td>
   <td>{{CompatChrome(60)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOperaMobile(47)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Request.integrity</code></td>
   <td>{{CompatChrome(46)}}</td>
   <td>{{CompatChrome(46)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOperaMobile(33)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Request.redirect</code></td>
   <td>{{CompatChrome(46)}}</td>
   <td>{{CompatChrome(46)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOperaMobile(33)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Constructor <code>init</code> can accept <code>ReadableStream</code> <code>body</code></td>
   <td>{{CompatChrome(43)}}</td>
   <td>{{CompatChrome(43)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatOperaMobile(33)}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] 읽기전용 스트림은 파이어폭스에서 사용 가능하며, <code>dom.streams.enabled</code>와 <code>javascript.options.streams</code> 설정에 숨어있습니다.</p>

<h2 id="관련항목">관련항목</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
 <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
 <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>