O que é fetch()

O fetch() permite que você faça solicitações de rede semelhantes a XMLHttpRequest (XHR). A principal diferença é que a API Fetch usa o Promises, que permite uma API mais simples e mais limpa, evitando o callback hell e tendo que lembrar a complexa API do XMLHttpRequest.

A API de busca está disponível no escopo global do Service Worker desde o Chrome 40, mas será ativada no escopo da janela no Chrome 42. Há também um polyfill bastante atraente pelo GitHub que você pode usar hoje.

Se você nunca usou Promises antes, confira Introdução às Promessas de JavaScript .

Solicitação de busca básica

Vamos começar comparando um exemplo simples implementado com um XMLHttpRequest e depois com fetch. Nós só queremos solicitar um URL, obter uma resposta e analisá-lo como JSON.

XMLHttpRequest

Um XMLHttpRequestprecisaria de dois ouvintes para definir os casos de sucesso e erro e uma chamada para open()e send(). Exemplo de documentos do MDN .

function reqListener() {  var data = JSON.parse(this.responseText);  console.log(data);}function reqError(err) {  console.log('Fetch Error :-S', err);}var oReq = new XMLHttpRequest();oReq.onload = reqListener;oReq.onerror = reqError;oReq.open('get', './api/some.json', true);oReq.send();

Buscar

Nosso pedido de busca parece um pouco com isto:

fetch('./api/some.json')  .then(    function(response) {      if (response.status !== 200) {        console.log('Looks like there was a problem. Status Code: ' +          response.status);        return;      }      // Examine the text in the response      response.json().then(function(data) {        console.log(data);      });    }  )  .catch(function(err) {    console.log('Fetch Error :-S', err);  });

Começamos verificando se o status da resposta é 200 antes de analisar a resposta como JSON.
A resposta de uma fetch()solicitação é um objeto Stream , o que significa que, quando chamamos o json()método, um Promise é retornado, pois a leitura do fluxo ocorrerá de forma assíncrona.

Metadados de resposta

No exemplo anterior, analisamos o status do objeto Response e analisamos a resposta como JSON. Outros metadados que podemos querer acessar, como cabeçalhos, são ilustrados abaixo.

fetch('users.json').then(function(response) {    console.log(response.headers.get('Content-Type'));    console.log(response.headers.get('Date'));    console.log(response.status);    console.log(response.statusText);    console.log(response.type);    console.log(response.url);});

Tipos de Resposta
Quando fizermos uma solicitação de busca, a resposta receberá um response.type ” basic“, ” cors” ou ” opaque“. Eles types indicam de onde o recurso veio e podem ser usados para informar como você deve tratar o objeto de resposta.

Quando uma solicitação é feita para um recurso na mesma origem, a resposta terá um basic tipo e não há restrições sobre o que você pode ver da resposta.

Se uma solicitação for feita para um recurso em outra origem que retorne os cabeçalhos de CORs , o tipo será cors. cors e as basic respostas são quase idênticas, exceto que uma cors resposta restringe os cabeçalhos que você pode visualizar para Cache-Control,Content-Language, Content-Type,Expires, Last-Modified ePragma.

Uma opaque resposta é para uma solicitação feita para um recurso em uma origem diferente que não retorna cabeçalhos CORS. Com uma resposta opaca, não poderemos ler os dados retornados ou visualizar o status da solicitação, o que significa que não podemos verificar se a solicitação foi bem-sucedida ou não.

Você pode definir um modo para uma solicitação de busca, de modo que apenas determinadas solicitações sejam resolvidas. Os modos que você pode definir são os seguintes:

same-origin só é bem-sucedida para solicitações de ativos na mesma origem, todas as outras solicitações serão rejeitadas.
cors permitirá solicitações para ativos na mesma origem e outras origens que retornam os cabeçalhos de CORs apropriados.
cors-with-forced-preflight sempre realizará uma verificação prévia antes de fazer a solicitação real.
no-cors destina-se a fazer pedidos para outras origens que não têm cabeçalhos CORS e resultam em uma opaque resposta, mas como dito, isso não é possível no escopo global da janela no momento.

Para definir o modo, adicione um objeto de opções como o segundo parâmetro na fetch solicitação e defina o modo nesse objeto:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})  .then(function(response) {    return response.text();  })  .then(function(text) {    console.log('Request successful', text);  })  .catch(function(error) {    log('Request failed', error)  });

Promessas Encadeadas

Uma das grandes características das promessas é a capacidade de encadear as mesmas. Para buscar, isso permite que você compartilhe a lógica entre as solicitações de busca.

Se você estiver trabalhando com uma API JSON, precisará verificar o status e analisar o JSON para cada resposta. Você pode simplificar seu código definindo o status e a análise JSON em funções separadas que retornam promessas, liberando-o para se preocupar apenas com o tratamento dos dados finais e do caso de erro.

function status(response) {  if (response.status >= 200 && response.status < 300) {    return Promise.resolve(response)  } else {    return Promise.reject(new Error(response.statusText))  }}function json(response) {  return response.json()}fetch('users.json')  .then(status)  .then(json)  .then(function(data) {    console.log('Request succeeded with JSON response', data);  }).catch(function(error) {    console.log('Request failed', error);  });

Definimos a status função que verifica o response.status e retorna o resultado de Promise.resolve() ou Promise.reject(), que retorna uma Promessa resolvida ou rejeitada.

Este é o primeiro método chamado em nossa fetch()cadeia, se resolver, então chamamos nosso json() método que novamente retorna uma Promessa da response.json()chamada. Depois disso, temos um objeto do JSON analisado. Se a análise falhar, a Promessa será rejeitada e a instrução catch será executada.

O melhor de tudo é que você pode compartilhar a lógica em todas as suas solicitações de busca, tornando o código mais fácil de manter, ler e testar.

Pedido POST

Não é incomum que os aplicativos da web desejem chamar uma API com um método POST e fornecer alguns parâmetros no corpo da solicitação.

Para fazer isso, podemos definir os parâmetros methode bodynas fetch() opções.

fetch(url, {    method: 'post',    headers: {      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"    },    body: 'foo=bar&lorem=ipsum'  })  .then(json)  .then(function (data) {    console.log('Request succeeded with JSON response', data);  })  .catch(function (error) {    console.log('Request failed', error);  });