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

O método fetch() 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. 

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

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 fetch() bem-sucedido incluiria a verificação de uma promessa resolvida, e depois verificando se a propriedade {{domxref("Response.ok")}} possui valor true. Um status HTTP 404 não constitui um erro de rede.

O método fetch() é controlado pela diretiva connect-src da Content Security Policy em vez da diretiva dos recursos que está recuperando.

Nota: Os parâmetros do método fetch() são idênticos aos do construtor {{domxref("Request.Request","Request()")}}.

Sintaxe

Promise<Response> fetch(input[, init]);

Parâmetros

input
Isto define o recurso que você deseja buscar. Isto pode ser:
init {{optional_inline}}
Um objeto opcional que contém configurações personalizadas que você pode aplicar à requisição. As opções possíveis são:

Valor de Retorno

Uma {{domxref("Promise")}} que resolve um objeto {{domxref("Response")}}.

Exceptions

Tipo Descrição
TypeError Desdo o Firefox 43, fetch()
lançará um TypeError se a URL tiver credenciais, como http://user:password@example.com.

Example

In our Fetch Request example (see Fetch Request live) we create a new {{domxref("Request")}} object using the relevant constructor, then fetch it using a fetch() 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.

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;
});

In our Fetch with init then Request example (see Fetch Request init live) we do the same thing except that we pass in an init object when we invoke fetch():

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) {
  ...
});

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

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

You can also use an object literal as headers in init.

var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

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

Specifications

Specification Status Comment
{{SpecName('Fetch','#fetch-method','fetch()')}} {{Spec2('Fetch')}} Defined in a WindowOrWorkerGlobalScope partial in the newest spec.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}} {{Spec2('Fetch')}} Initial definition
{{SpecName('Credential Management')}} {{Spec2('Credential Management')}} Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for init.credentials.

Compatibilidade com navegadores

{{CompatibilityTable}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatChrome(42)}} 14 {{CompatGeckoDesktop(34)}}[1]
{{CompatGeckoDesktop(39)}}
{{CompatGeckoDesktop(52)}}[2]		 {{CompatNo}} 29
28[1]		 {{CompatNo}}
Streaming response body {{CompatChrome(43)}} 14 {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Support for blob: and data: {{CompatChrome(48)}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
referrerPolicy {{CompatChrome(52)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} 39 {{CompatUnknown}}
signal and observer {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}[3] {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatNo}} {{CompatChrome(42)}} 14 {{CompatGeckoMobile(52)}}[2] {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatChrome(42)}}
Streaming response body {{CompatNo}} {{CompatChrome(43)}} 14 {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(43)}}
Support for blob: and data: {{CompatNo}} {{CompatChrome(43)}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(43)}}
referrerPolicy {{CompatNo}} {{CompatChrome(52)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} 39 {{CompatUnknown}} {{CompatChrome(52)}}
signal and observer {{ CompatNo }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}[3] {{ CompatNo }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}

[1] API is implemented behind a preference.

[2] fetch() now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.

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

See also