---
title: Fetch API
slug: Web/API/Fetch_API
tags:
  - API
  - Experimental
  - Fetch
  - Referência(2)
  - XMLHttpRequest
  - request
translation_of: Web/API/Fetch_API
---
<p>{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable() }}</p>

<p><span id="result_box" lang="pt"><span>A Fetch API fornece uma interface para buscar recursos (por exemplo, em toda a rede). Parecerá familiar para qualquer pessoa que tenha usado XMLHttpRequest, porém a nova API oferece um conjunto de recursos mais poderoso e flexível.</span></span></p>

<h2 id="Conceitos_e_uso">Conceitos e uso</h2>

<p>O Fetch fornece uma definição genérica de objetos de {{domxref("Request")}} e {{domxref("Response")}}  (e outras coisas envolvidas com solicitações de rede). Isso permitirá que eles sejam usados onde quer que sejam necessários no futuro, seja para service workers, Cache API e outras coisas similares que manipulam ou modifiquem pedidos e respostas ou qualquer tipo de caso de uso que possa exigir que você gere suas próprias responses programaticamente.</p>

<p>Ele também fornece uma definição para conceitos relacionados como CORS e a semântica de cabeçalho de origem HTTP, suplantando suas definições separadas em outro lugar.</p>

<p>Para fazer uma solicitação e buscar um recurso, use o método {{domxref("GlobalFetch.fetch")}} . Ele é implementado em várias interfaces, especificamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}. Isso torna disponível em praticamente qualquer contexto em que você possa querer obter recursos.</p>

<p>O método fetch () tem um argumento obrigatório, o caminho para o recurso que deseja obter. Ele retorna uma promessa que resolve a {{domxref("Response")}} para esta requisição, seja ele bem-sucedido ou não. Você também pode, opcionalmente, passar um objeto de opções de inicialização como o segundo argumento (consulte {{domxref("Request")}}).</p>

<p>Uma vez que uma {{domxref("Response")}} é recuperada, há uma série de métodos disponíveis para definir o conteúdo do corpo e como ele deve ser tratado (veja {{domxref("Body")}}.)</p>

<p><br>
 Você pode criar um pedido e uma resposta diretamente usando os construtores {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, mas é improvável que você faça isso diretamente. Em vez disso, é mais provável que sejam criados como resultados de outras ações da API (por exemplo,  {{domxref("FetchEvent.respondWith")}} de service workers).</p>

<div class="note">
<p><strong>Note</strong>: Encontre mais informações sobre os recursos do Fetch API em <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>,  e conceitos para estudos em <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p>
</div>

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

<dl>
 <dt>{{domxref("GlobalFetch")}}</dt>
 <dd>Contém o método <code>fetch()</code> usado para buscar um recurso.</dd>
 <dt>{{domxref("Headers")}}</dt>
 <dd>Representa cabeçalhos response/request, permitindo que você os consulte e faça diferentes ações dependendo dos resultados.</dd>
 <dt>{{domxref("Request")}}</dt>
 <dd>Representa um pedido de recursos.</dd>
 <dt>{{domxref("Response")}}</dt>
 <dd>Representa a resposta de uma requisição.</dd>
</dl>

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

<dl>
 <dt>{{domxref("Body")}}</dt>
 <dd>Providencia métodos relacionados ao corpo da resposta/requisição, permitindo que você declare qual seu tipo de conteúdo e como ele deve ser tratado.</dd>
</dl>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentários</th>
  </tr>
  <tr>
   <td>{{SpecName('Fetch')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2>

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

<h2 id="Veja_também">Veja também</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>
 <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>