Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 23, 2021 01:45 pm GMT

Advogando favor da queridssima Fetch API

Eita, quanto cdigo!

Ento voc, assim como eu (novata nesse assunto) estava seguindo algum tutorial na internet explicando como fazemos requisies para o servidor. Entretanto, contudo, todavia; o mtodo utilizado pelo professor era com XMLHttpRequest.

Se voc olhou para aquele cdigo enorme e pensou "puxa vida!", esse post para voc!

Voltando um pouquinho: Como requisies eram feitas antigamente?

Antigamente o carregamento da pgina na web era simples: voc enviaria uma solicitao de um site a um servidor e, desde que nada desse errado, os ativos que formaram a pgina da web seriam baixados e exibidos em seu computador.

O problema com este modelo que sempre que voc deseja atualizar qualquer parte da pgina (por exemplo, para exibir um novo conjunto de produtos) voc precisa carregar a pgina inteira novamente. Que experincia de usurio esquisita, no?

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

Ah, a tecnologia...

Isso levou criao de tecnologias que permitem que pginas da web solicitem pequenos blocos de dados (como HTML , XML , JSON ou texto simples) e os exibam apenas quando necessrio, ajudando a resolver o problema.

Isso obtido usando APIs como (se prepara):

  • XMLHttpRequestchatinhooutdatedningumseimporta ou...
  • A belssima lindssima maravilhosa API Fetch dona da minha vida.

Essas tecnologias permitem que as pginas da web tratem diretamente de fazer solicitaes HTTP para recursos especficos disponveis em um servidor e formatar os dados resultantes conforme necessrio antes de serem exibidos.

Onde encontro isso funcionando na prtica?

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 srie porque voc est SUPER confort- c-ham enfim.

Agora no campo de busca, escreva o nome de uma srie. Mas tem que ser boa, hein? Escreve l... Brooklyn Nine-Nine; uma das melhores sries que existem e s minha opinio importa.

Assim que voc clicar no boto "Procurar", perceba que o contedo principal mudar, mas a maioria das informaes ao redor, como cabealho, rodap, menu de navegao, etc., permanecero as mesmas. Isso o que? Isso Fantstico, pois:

  1. As atualizaes de pgina so muito mais rpidas e voc no precisa esperar a atualizao da pgina, o que significa que o site parece mais rpido e gil.

  2. Menos dados so baixados em cada atualizao, o que significa menos largura de banda desperdiada.

Antigamente, essa tcnica era conhecida como AJAX, porque utilizava a XMLHttpRequest para solicitar dados XML (blergh). Normalmente, esse no o caso hoje em dia (amm), mas o resultado ainda o mesmo e o termo "Ajax" ainda frequentemente usado para descrever a tcnica.

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 pgina inteira. Pois muito que bem.

Como seria solicitar dados com essa tal de api fetch?

A API Fetch basicamente uma substituio moderna do XHR; ela foi introduzido em navegadores recentemente para tornar as solicitaes assncronas de HTTP mais fceis de fazer em JavaScript, tanto para desenvolvedores quanto para outras APIs que se baseiam no Fetch.

"Ser que a fetch to boa assim?" observe:

fetch(url)   .then(function(){   })  .catch(function(){   })

Que colrio para os olhos, que monumento abenoado, que viso paradisaca, 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 mtodo fetch passando a URL do recurso que queremos buscar.

2) then(): Retorna uma promessa. Se a promessa retornada for resolve, a funo dentro do mtodo then() executada. Essa funo contm o cdigo 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 mtodo catch usado para lidar com reject. O cdigo dentro de catch() ser executado se um erro ocorrer ao chamar a API escolhida.

E isto. isso. S isso.

Para voc que ficou coando a cabea (como eu) com a XMLHttpRequestNingumSeImporta, temos uma soluo muito mais vivel e fcil de aplicar.

No cdigo acima, voc est chamando a Fetch API e passando o URL para o servidor. Ento, uma resposta recebida. No entanto, a resposta recebida no vem formatada em JSON, ou seja, no vem conhecidssima como a noite de Pars ou poderosssima como a espada de um samurai.

Ela vem como um objeto com uma srie de mtodos que podem ser usados dependendo do que voc quer fazer com as informaes.

Ento vamos converter o objeto retornado em JSON; usando um mtodo chamado (se prepara)... json().

fetch(url, { method: 'GET' })    .then((resp) => resp.json()) // O incio 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 comentrios: o de sucesso e o de falha.

isto! Espero que esse post tenha aguado sua curiosidade para ler mais respeito :]


Original Link: https://dev.to/marianaramacciotti/advogando-a-favor-da-queridissima-fetch-api-ajf

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To