--- 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 => response.blob()) .then(blob => { 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 => { if (response.status === 200) { return response.json(); } else { throw new Error('Something went wrong on api server!'); } }) .then(response => { console.debug(response); // ... }).catch(error => { 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>{{Compat("api.Request")}}</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>