Advogando a favor da queridíssima Fetch API

Eita, quanto código!

Então você, assim como eu (novata nesse assunto) estava seguindo algum tutorial na internet explicando como fazemos requisições para o servidor. Entretanto, contudo, todavia; o método utilizado pelo professor era com XMLHttpRequest.

Se você olhou para aquele código enorme e pensou "puxa vida!", esse post é para você!

Voltando um pouquinho: Como requisições eram feitas antigamente?

Antigamente o carregamento da página na web era simples: você enviaria uma solicitação de um site a um servidor e, desde que nada desse errado, os ativos que formaram a página da web seriam baixados e exibidos em seu computador.

O problema com este modelo é que sempre que você deseja atualizar qualquer parte da página (por exemplo, para exibir um novo conjunto de produtos) você precisa carregar a página inteira novamente. Que experiência de usuário esquisita, não?

Se você por acaso você já saiu de um site porque ficou irritado que o mesmo demorou 5 segundos pra carregar, provavelmente você não curtiria se um site ficasse recarregando por completo para atualizar né?

Ah, a tecnologia...

Isso levou à criação de tecnologias que permitem que páginas da web solicitem pequenos blocos de dados (como HTML , XML , JSON ou texto simples) e os exibam apenas quando necessário, ajudando a resolver o problema.

Isso é obtido usando APIs como (se prepara):

XMLHttpRequestchatinhooutdatedninguémseimporta ou...
A belíssima lindíssima maravilhosa API Fetch dona da minha vida.

Essas tecnologias permitem que as páginas da web tratem diretamente de fazer solicitações HTTP para recursos específicos disponíveis em um servidor e formatar os dados resultantes conforme necessário antes de serem exibidos.

Onde encontro isso funcionando na prática?

Entre em um site que você adora. Vou assumir que você curte um Netflixzinho de domingo, enrolado nas cobertas tomando chocolate quente...

Dormindo no meio da série porque você está SUPER confort- c-ham enfim.

Agora no campo de busca, escreva o nome de uma série. Mas tem que ser boa, hein? Escreve lá... Brooklyn Nine-Nine; uma das melhores séries que existem e só minha opinião importa.

Assim que você clicar no botão "Procurar", perceba que o conteúdo principal mudará, mas a maioria das informações ao redor, como cabeçalho, rodapé, menu de navegação, etc., permanecerão as mesmas. Isso é o que? Isso é Fantástico, pois:

As atualizações de página são muito mais rápidas e você não precisa esperar a atualização da página, o que significa que o site parece mais rápido e ágil.
Menos dados são baixados em cada atualização, o que significa menos largura de banda desperdiçada.

Antigamente, essa técnica era conhecida como AJAX, porque utilizava a XMLHttpRequest para solicitar dados XML (blergh). Normalmente, esse não é o caso hoje em dia (amém), mas o resultado ainda é o mesmo e o termo "Ajax" ainda é frequentemente usado para descrever a técnica.

Resumindo: Ajax é o tio que utiliza uma API da web como proxy para solicitar dados de maneira mais inteligente, em vez de apenas fazer o navegador recarregar a página inteira. Pois muito que bem.

Como seria solicitar dados com essa tal de api fetch?

A API Fetch é basicamente uma substituição moderna do XHR; ela foi introduzido em navegadores recentemente para tornar as solicitações assíncronas de HTTP mais fáceis de fazer em JavaScript, tanto para desenvolvedores quanto para outras APIs que se baseiam no Fetch.

"Será que a fetch é tão boa assim?" observe:

fetch(url)
   .then(function(){

   })
  .catch(function(){

   })

Que colírio para os olhos, que monumento abençoado, que visão paradisíaca, que resposta para todas as perguntas sobre a complexidade da psiquê humana... Agora que já terminei de elogiar, vamos explicar o que cada trem desse faz.

1) fetch(url): Invocamos o método fetch passando a URL do recurso que queremos buscar.

2) then(): Retorna uma promessa. Se a promessa retornada for resolve, a função dentro do método then() é executada. Essa função contém o código para lidar com os dados recebidos da API.

3) catch(): A API chamada usando fetch() pode estar inoperante ou outros erros podem ocorrer. Se isso acontecer, a promessa reject será retornada. O método catch é usado para lidar com reject. O código dentro de catch() será executado se um erro ocorrer ao chamar a API escolhida.

E é isto. É isso. É SÓ isso.

Para você que ficou coçando a cabeça (como eu) com a XMLHttpRequestNinguémSeImporta, temos uma solução muito mais viável e fácil de aplicar.

No código acima, você está chamando a Fetch API e passando o URL para o servidor. Então, uma resposta é recebida. No entanto, a resposta recebida não vem formatada em JSON, ou seja, não vem conhecidíssima como a noite de París ou poderosíssima como a espada de um samurai.

Ela vem como um objeto com uma série de métodos que podem ser usados dependendo do que você quer fazer com as informações.

Então vamos converter o objeto retornado em JSON; usando um método chamado (se prepara)... json().

fetch(url, { method: 'GET' })
    .then((resp) => resp.json()) // O início de um sonho
    .catch((erro) => console.log(erro)); // Deu tudo errado

O GET informa o que queremos fazer ao acessar aqueles dados. Depois temos nossos dois casos como mencionado nos comentários: o de sucesso e o de falha.

É isto! Espero que esse post tenha aguçado sua curiosidade para ler mais à respeito :]

Fonte de Pesquisa: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data