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

<p class="summary"><span class="seoSummary">A Fetch API egy interfészt biztosít számunkra adatok lekéréséhez (beleértve a hálózaton keresztüli kéréseket is). Ismerősnek fog hatni mindazok számára, akik már használtak {{DOMxRef("XMLHttpRequest")}}-et, de ez az újabb API jóval erőteljesebb és rugalmasabb eszközökkel áll rendelkezésre.</span></p>

<h2 id="Concepts_and_usage">Concepts and usage</h2>

<p>Fetch provides a generic definition of {{DOMxRef("Request")}} and {{DOMxRef("Response")}} objects (and other things involved with network requests). This will allow them to be used wherever they are needed in the future, whether it’s for service workers, Cache API, and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of computer program or personal programming instructions).</p>

<p>It also defines related concepts such as CORS and the HTTP Origin header semantics, supplanting their separate definitions elsewhere.</p>

<p>For making a request and fetching a resource, use the {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} method. It is implemented in multiple interfaces, specifically {{DOMxRef("Window")}} and {{DOMxRef("WorkerGlobalScope")}}. This makes it available in pretty much any context you might want to fetch resources in.</p>

<p>The <code>fetch()</code> method takes one mandatory argument, the path to the resource you want to fetch. It returns a {{DOMxRef("Promise")}} that resolves to the {{DOMxRef("Response")}} to that request, whether it is successful or not. You can also optionally pass in an <code>init</code> options object as the second argument (see {{DOMxRef("Request")}}).</p>

<p>Once a {{DOMxRef("Response")}} is retrieved, there are a number of methods available to define what the body content is and how it should be handled (see {{DOMxRef("Body")}}).</p>

<p>You can create a request and response directly using the {{DOMxRef("Request.Request", "Request()")}} and {{DOMxRef("Response.Response", "Response()")}} constructors, but it's uncommon to do this directly. Instead, these are more likely to be created as results of other API actions (for example, {{DOMxRef("FetchEvent.respondWith()")}} from service workers).</p>

<h3 id="Differences_from_jQuery">Differences from jQuery</h3>

<p>The <code>fetch</code> specification differs from <code>jQuery.ajax()</code> in three main ways:</p>

<ul>
 <li>The Promise returned from <code>fetch()</code> <strong>won’t reject on HTTP error status</strong> even if the response is an HTTP <code>404</code> or <code>500</code>. Instead, it will resolve normally (with <code>ok</code> status set to <code>false</code>), and it will only reject on network failure or if anything prevented the request from completing.</li>
 <li><code>fetch()</code> <strong><s>won't</s> can receive cross-site cookies; </strong>you <s>can’t</s> can establish a cross site session using fetch. <s><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a></code> headers from other sites are silently ignored.</s></li>
 <li><code>fetch()</code> <strong>won’t send cookies</strong>, unless you set <code>credentials: 'same-origin'</code>.
  <ul>
   <li>In <a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">August 2017</a>, the spec changed the default credentials policy to <code>'same-origin'</code>. The following browsers shipped and outdated native fetch, and were updated in these versions:
    <ul>
     <li>Firefox version 61.0b13.</li>
     <li>Safari version 12.</li>
     <li>Chrome version 68.</li>
    </ul>
   </li>
   <li>If you are targetting older versions of these browsers, be sure to include <code>credentials: 'same-origin'</code> <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init option</a> on all api requests that may be affected by cookies/user login state.</li>
  </ul>
 </li>
</ul>

<div class="note">
<p><strong>Note</strong>: Find out more about using the Fetch API features in <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>, and study concepts in <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p>
</div>

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

<p>Browsers have started to add experimental support for the {{DOMxRef("AbortController")}} and {{DOMxRef("AbortSignal")}} interfaces (aka The Abort API), which allow operations like Fetch and XHR to be aborted if they have not already completed. See the interface pages for more details.</p>

<h2 id="Fetch_Interfaces">Fetch Interfaces</h2>

<dl>
 <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt>
 <dd>The <code>fetch()</code> method used to fetch a resource.</dd>
 <dt>{{DOMxRef("Headers")}}</dt>
 <dd>Represents response/request headers, allowing you to query them and take different actions depending on the results.</dd>
 <dt>{{DOMxRef("Request")}}</dt>
 <dd>Represents a resource request.</dd>
 <dt>{{DOMxRef("Response")}}</dt>
 <dd>Represents the response to a request.</dd>
</dl>

<h2 id="Fetch_mixin">Fetch mixin</h2>

<dl>
 <dt>{{DOMxRef("Body")}}</dt>
 <dd>Provides methods relating to the body of the response/request, allowing you to declare what its content type is and how it should be handled.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

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

<h2 id="Browser_compatibility">Browser compatibility</h2>



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

<h2 id="See_also">See also</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>