path: root/files/pt-br/web/api/fetch/index.html

---
title: WindowOrWorkerGlobalScope.fetch()
slug: Web/API/fetch
translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
---
<div>{{APIRef("Fetch API")}}</div>

<p>O método <code><strong>fetch()</strong></code> do mixin {{domxref("WindowOrWorkerGlobalScope")}} inicia um processo de busca de um recurso da rede. Este, retorna uma promessa que resolve o objeto {{domxref("Response")}} que representa a resposta a sua requisição. </p>

<p><code>WorkerOrGlobalScope</code> é implementado por {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}, o que significa que o método <code>fetch()</code> está disponível em praticamente qualquer contexto em que você possa querer obter recursos.</p>

<p>Uma promessa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} rejeita com um {{jsxref("TypeError")}} quando um erro de rede é encontrado, embora isso geralmente signifique um problema de permissões ou similar. Uma verificação precisa de um <code>fetch()</code> bem-sucedido incluiria a verificação de uma promessa resolvida, e depois verificando se a propriedade {{domxref("Response.ok")}} possui valor <code>true</code>. Um status HTTP 404 não constitui um erro de rede.</p>

<p>O método <code>fetch()</code> é controlado pela diretiva <code>connect-src</code> da <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> em vez da diretiva dos recursos que está recuperando.</p>

<div class="note">
<p><strong>Nota</strong>: Os parâmetros do método <code>fetch()</code> são idênticos aos do construtor {{domxref("Request.Request","Request()")}}.</p>
</div>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>

<h3 id="Parâmetros">Parâmetros</h3>

<dl>
 <dt><em>input</em></dt>
 <dd>Isto define o recurso que você deseja buscar. Isto pode ser:
 <ul>
  <li>Um {{domxref("USVString")}} contendo uma URL direta para o recurso que você quer obter. Alguns navegadores aceitam <code>blob:</code> e <code>data:</code> como esquemas.</li>
  <li>Um objeto {{domxref("Request")}}.</li>
 </ul>
 </dd>
 <dt><em>init</em> {{optional_inline}}</dt>
 <dd>Um objeto opcional que contém configurações personalizadas que você pode aplicar à requisição. As opções possíveis são:
 <ul>
  <li><code>method</code>: Método HTTP, por exemplo, <code>GET</code>, <code>POST</code>.</li>
  <li><code>headers</code>: Qualquer cabeçalho que você queira adicionar à sua requisição, contido dentro de um objeto {{domxref("Headers")}} ou um objeto literal com valores {{domxref("ByteString")}}.</li>
  <li><code>body</code>: Qualquer corpo que você queira adicionar à sua requisição: podendo ser um {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou um objeto {{domxref("USVString")}}. Note que uma requisição usando os métodos <code>GET</code> ou <code>HEAD</code> não pode ter um corpo.</li>
  <li><code>mode</code>: O modo que deseja usar para a requisição, por exemplo, <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></li>
  <li><code>credentials</code>: A credencial que deseja usar para a requisição: <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Para enviar automaticamente cookies para o domínio atual, esta opção deve ser fornecida. Começando com o Chrome 50, essa propriedade também usa uma instância {{domxref("FederatedCredential")}} ou uma instância {{domxref("PasswordCredential")}}.</li>
  <li><code>cache</code>: O modo de cache que deseja usar na requisição: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</li>
  <li><code>redirect</code>: O modo de redirecionamento pode usar: <code>follow</code> (segue automaticamente o redirecionamento), <code>error</code> (aborta com um erro se ocorrer um redirecionamento), ou <code>manual</code> (manipula redirecionamentos manualmente). No Chrome o padrão foi <code>follow</code> antes do Chrome 47 e <code>manual</code> a partir do Chrome 47.</li>
  <li><code>referrer</code>: Um {{domxref("USVString")}} especificando <code>no-referrer</code>, <code>client</code>, ou uma URL. O padrão é <code>client</code>.</li>
  <li><code>referrerPolicy</code>: Especifica o valor do cabeçalho HTTP referer. Pode ser um destes: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
  <li><code>integrity</code>: Contém o valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridade de subrecurso</a> da requisição (por exemplo, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
  <li><code>signal</code>: Uma instância do objeto {{domxref("FetchSignal")}}; permite que você se comunique com um pedido de busca e controle-o através de um {{domxref("FetchController")}}. {{non-standard_inline}}</li>
  <li><code>observe</code>: Um objeto {{domxref("ObserverCallback")}} — o objetivo exclusivo deste objeto é fornecer uma função de retorno de chamada que é executada quando a solicitação fetch é executada. Isto retorna um objeto {{domxref("FetchObserver")}} que pode ser usado para recuperar informações sobre o status de uma solicitação fetch. {{non-standard_inline}}</li>
 </ul>
 </dd>
</dl>

<h3 id="Valor_de_Retorno">Valor de Retorno</h3>

<p>Uma {{domxref("Promise")}} que resolve um objeto {{domxref("Response")}}.</p>

<h3 id="Exceptions">Exceptions</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><strong>Tipo</strong></th>
   <th scope="col"><strong>Descrição</strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>TypeError</code></td>
   <td>Desdo o <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code><br>
    lançará um <code>TypeError</code> se a URL tiver credenciais, como <code>http://user:password@example.com</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Example">Example</h2>

<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) we create a new {{domxref("Request")}} object using the relevant constructor, then fetch it using a <code>fetch()</code> call. Since we are fetching an image, we run {{domxref("Body.blob()")}} on the response to give it the proper MIME type so it will be handled properly, then create an Object URL of it and display it in an {{htmlelement("img")}} element.</p>

<pre class="brush: js">var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(response) {
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
});</pre>

<p>In our <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) we do the same thing except that we pass in an init object when we invoke <code>fetch()</code>:</p>

<pre class="brush: js">var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {
  ...
});</pre>

<p>Note that you could also pass the init object in with the <code>Request</code> constructor to get the same effect, e.g.:</p>

<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>

<p>You can also use an object literal as <code>headers</code> in <code>init</code>.</p>

<pre class="brush: js">var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);
</pre>

<h2 id="Specifications">Specifications</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','#fetch-method','fetch()')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
  </tr>
  <tr>
   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Initial definition</td>
  </tr>
  <tr>
   <td>{{SpecName('Credential Management')}}</td>
   <td>{{Spec2('Credential Management')}}</td>
   <td>Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for <code>init.credentials</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</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>Basic support</td>
   <td>{{CompatChrome(42)}}</td>
   <td>14</td>
   <td>{{CompatGeckoDesktop(34)}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop(39)}}<br>
    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>29<br>
    28<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Streaming response body</td>
   <td>{{CompatChrome(43)}}</td>
   <td>14</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Support for <code>blob:</code> and <code>data:</code></td>
   <td>{{CompatChrome(48)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>referrerPolicy</code></td>
   <td>{{CompatChrome(52)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>39</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>signal</code> and <code>observer</code></td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}<sup>[3]</sup></td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(42)}}</td>
   <td>14</td>
   <td>{{CompatGeckoMobile(52)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(42)}}</td>
  </tr>
  <tr>
   <td>Streaming response body</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43)}}</td>
   <td>14</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(43)}}</td>
  </tr>
  <tr>
   <td>Support for <code>blob:</code> and <code>data:</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(43)}}</td>
  </tr>
  <tr>
   <td><code>referrerPolicy</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(52)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>39</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(52)}}</td>
  </tr>
  <tr>
   <td><code>signal</code> and <code>observer</code></td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}<sup>[3]</sup></td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] API is implemented behind a preference.</p>

<p>[2] <code>fetch()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>

<p>[3] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</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>
</ul>