O que é fetch()
Published: 2020-03-18 11:38:41

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](https://fetch.spec.whatwg.org/) está disponível no escopo global do [Service Worker](https://w3c.github.io/ServiceWorker/) desde o Chrome 40, mas será ativada no escopo da janela no Chrome 42. Há também um [polyfill](https://github.com/github/fetch) bastante atraente pelo [GitHub](https://github.com/github/fetch) que você pode usar hoje.

Se você nunca usou [Promises](https://dev.to/alexandrefreire/o-que-e-promise-ja4) 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 .
```javascript
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:
```javascript
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](https://streams.spec.whatwg.org/) , 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.
```javascript
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](https://enable-cors.org/) , 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` e` Pragma`.

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:
```javascript
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.
```javascript
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.
```javascript
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);  });
```
### Enviando Credenciais com uma Solicitação de Busca
Se você quiser fazer uma solicitação de busca com credenciais, como cookies, você deve definir credentials o pedido para "include".
```javascript
fetch(url, {  credentials: 'include'})
```