---
title: Fetch API
slug: Web/API/Fetch_API
tags:
  - API
  - Experimental
  - Fetch
  - Landing
  - Reference
translation_of: Web/API/Fetch_API
---
<div>{{DefaultAPISidebar("Fetch API")}}</div>

<p><strong>Fetch API</strong>는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.  {{domxref("XMLHttpRequest")}}와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.</p>

<h2 id="기본_개념과_사용_방법">기본 개념과 사용 방법</h2>

<p>Fetch에는 일반적인 오브젝트로로 {{domxref("Request")}} 와 {{domxref("Response")}}가 포함되어 있습니다.  이것들은 service worker이나 Cache API같이 Response와 Request객체를 다루는 API나 독자적으로 리스폰스를 발생시키는 경우에도 사용 가능합니다.</p>

<p>또한 CORS나 HTTP 오리진 헤더의 행동에 관련한 개념에 대해서도 정의되어 있습니다. 이 정의는 여러곳에 분산되어있는 갖가지 행동에대한 정의들을 한곳에 고쳐 쓴 것입니다.</p>

<p>Fetch API로 리소스를 취득하기 위해서 {{domxref("GlobalFetch.fetch")}} 메소드를 불러들여야 합니다. 이 메소드는  {{domxref("Window")}}나 {{domxref("WorkerGlobalScope")}}와 같은 인터페이스로부터 구현되었습니다. </p>

<p><code>fetch()</code>를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안됩니다. 읽어들인 뒤,  <code>fetch()</code>는 <code>Promise</code>객체를 반환합니다. 리퀘스트가 성공하든 실패하든 해당 리퀘스트 통신에 대한 {{domxref("Response")}}객체가 취득됩니다. <code>fetch()</code>의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없습니다. 이 인수에 대한 상세한 정보는 {{domxref("Request")}})를 참고해주시기 바랍니다.</p>

<p>{{domxref("Response")}}를 가져온 후에, 콜백함수의 매개변수로 담긴 response 객체에는 리스폰스에 포함되어있는 컨텐츠와 그에대한 처리방법이 담긴 메소드들이 담겨있습니다. 자세한 사항은 {{domxref("Body")}}를 참고해주시기 바랍니다.</p>

<p>{{domxref("Request.Request","Request()")}}와 {{domxref("Response.Response","Response()")}}를 사용하는 것으로, Request와 Response를 직접 작성할 수 있습니다. 하지만 이러한 추가 옵션들은   {{domxref("FetchEvent.respondWith")}}와 같은 또다른 API를 불러 들이는 작업이 수행되어야 하므로 필요하지 않다면 굳이 작성하지 않는 편이 좋습니다.</p>

<div class="note">
<p><strong>참고</strong>: Fetch API에 대한 자세한 이용방법은 <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>를 참고해주시기 바랍니다. 또한  <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>에서는 Fetch API의 기본개념 또한 설명되어 있습니다.</p>
</div>

<h3 id="Aborting_a_fetch">Aborting a fetch</h3>

<p>몇몇 브라우저들은 {{domxref("AbortController")}}와 {{domxref("AbortSignal")}} 인터페이스에 대한 실험적인 기능을 추가로 지원하였습니다. 만약 Fetch API와 XHR API 호출이 완료되지 않았다면, 중단 될 수 있도록 하는 기능입니다. 자세한 사항은 인터페이스 문서를 참고해주시기 바랍니다.</p>

<h2 id="Fetch_인터페이스">Fetch 인터페이스</h2>

<dl>
 <dt>{{domxref("GlobalFetch")}}</dt>
 <dd>리소스를 취득하기 위해 사용되는  <code>fetch()</code> 메서드가 정의되어 있습니다.</dd>
 <dt>{{domxref("Headers")}}</dt>
 <dd>리퀘스트와 리스폰스 객체에 대한 헤더입니다. 헤더정보에 보내는 쿼리나 통신 결과의 행동에 대한 선택이 가능합니다.</dd>
 <dt>{{domxref("Request")}}</dt>
 <dd>리소스에 대한 리퀘스트의 객체입니다.</dd>
 <dt>{{domxref("Response")}}</dt>
 <dd>리퀘스트에 대한 리스폰스 객체입니다.</dd>
</dl>

<h2 id="Fetch_믹스인">Fetch 믹스인</h2>

<dl>
 <dt>{{domxref("Body")}}</dt>
 <dd>Response와 Request 본체에 관련한 메소드들이 정의되어 있습니다. 이것들을 이용함으로써 response 결과물을 html, json과 같이 컨텐츠 타입별로 처리하는것이 가능합니다. </dd>
</dl>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Fetch')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>

<h2 id="관련정보">관련정보</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li>
 <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>
 <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
 <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
</ul>