Você já desejou que seu computador pudesse fazer o trabalho pesado para você? Como baixar os dados de um site inteiro para que você possa trabalhar offline. Claro, seu navegador da web vem com seu recurso de download, mas ele pega apenas uma página por vez – deixando de fora quaisquer hiperlinks que apontem para outras páginas dentro do próprio site. Isso significa reiniciar todo o processo de novo e de novo. Não seria ótimo se houvesse uma maneira mais fácil?
Felizmente, há uma maneira mais fácil. Com a API Fetch em JavaScript, você pode dizer ao seu computador para obter qualquer site ou arquivo de que você precisa e trazê-lo de volta para você. Neste artigo, mostraremos como usar a API Fetch de várias maneiras. Também daremos alguns exemplos de quando isso pode ser útil.
Vamos começar!
O que é a API de busca de JavaScript?
A API Fetch é um recurso que permite fazer solicitações HTTP (como GET, POST, PUT ou DELETE) para um servidor web. Está embutido em navegadores modernos, então você não precisa de bibliotecas ou pacotes adicionais para usá-lo.
Simplificando, a Fetch API facilita a obtenha informações de um site e faça algo com esses dados em seu navegador (ou em qualquer ambiente que você esteja usando). Por exemplo, você pode usar a API Fetch para solicitar um documento HTML de um site e, em seguida, analisá-lo para obter certos elementos.
A Fetch API é incrivelmente direta e oferece um nível incomparável de flexibilidade por meio do uso de JavaScript Promete fazer solicitações de navegadores da web. Um único método fetch() global pode ser usado para direcionar seu navegador para enviar qualquer solicitação desejada para um URL especificado.
(Observação: Promises são objetos que representam a eventual conclusão (ou falha) de uma operação assíncrona e seu valor resultante. No caso de Fetch API, ela retorna uma Promise que resolve a resposta da solicitação.)
A Fetch API é uma virada de jogo para os desenvolvedores, dando-lhes uma flexibilidade inigualável através do uso de JavaScript Promises. Ele também simplifica as solicitações do navegador da Web com seu método global fetch() – permitindo que você faça solicitações de URL de maneira fácil e rápida a partir do seu navegador. Se você é novo em codificação ou já faz isso há anos, esta ferramenta poderosa pode ajudar a simplificar seu fluxo de trabalho rapidamente.
Histórico da API de busca e AJAX
A API Fetch é um recurso de navegador da Web relativamente novo, mas se baseia em tecnologias mais antigas, como AJAX.
AJAX significa JavaScript assíncrono e XML. Foi a primeira tecnologia amplamente adotada para permitir que os sites enviem solicitações sem a necessidade de recarregar a página inteira. Antes do AJAX, se você quisesse atualizar algo em sua página da Web, precisaria recarregar a página inteira – o que era desajeitado e ineficiente.
O AJAX permitiu que os desenvolvedores fizessem solicitações HTTP sem a necessidade de um atualização de página. Essa tecnologia revolucionou o desenvolvimento web, mas tinha suas limitações. As solicitações AJAX limitavam-se a recuperar dados da mesma origem (domínio/subdomínio) da página solicitada.
Digite a API de busca. Produzida por navegadores da Web mais recentes, essa tecnologia tinha todo o poder do AJAX, mas sem problemas de segurança de origem cruzada e suporte adicional para mais métodos HTTP como PUT e DELETE.
Como usar a API Fetch em JavaScript?
Agora que você conhece a API Fetch, vamos ver como usá-la.
Buscar sintaxe da API
Usar a API Fetch é relativamente simples. Tudo o que você precisa é a URL do recurso que deseja buscar, além de algum código que diga ao seu navegador o que fazer com a resposta do servidor.
A sintaxe da API Fetch é a seguinte:
fetch(url) .then(response => { // Faça algo com a resposta aqui });É um processo de duas etapas. Primeiro, você envia uma solicitação para a URL desejada usando o método fetch(). Em seguida, você lida com a resposta com o método .then(). Nesse caso, ainda não estamos fazendo nada com o código, mas você pode usar esse mesmo código para analisar documentos HTML, enviar dados por meio de solicitações POST e muito mais.
Vamos percorrer um exemplo para tornar isso mais claro.
Enviando uma solicitação
A maneira mais simples de fazer uma solicitação é com o método global fetch(). Esse método usa dois parâmetros – a URL do recurso que você deseja recuperar e um objeto de configuração opcional.
Por exemplo, se você deseja obter um documento HTML de um site, pode usar o seguinte código:
fetch(‘www.example.com/document.html’) .then(response => response.text()) // Lê a resposta como texto .then(html => alert(html)); // Alerta o conteúdo HTML recuperado
Esse código enviará uma solicitação GET para a URL especificada e, em seguida, alertará a resposta (neste caso, um documento HTML). É importante observar que, se a solicitação falhar, o método .then() retornará um erro. É seu trabalho como desenvolvedor lidar com esses erros normalmente.
Vejamos um exemplo mais complexo.
Fazendo solicitações POST
Você também pode usar a API Fetch para fazer solicitações POST. Isso é útil se você precisar enviar dados para um servidor da Web, como ao enviar formulários ou fazer upload de arquivos.
Para fazer uma solicitação POST, você precisa adicionar o objeto de configuração ao método fetch(). Este objeto deve incluir o método HTTP (neste caso, POST) e quaisquer dados que você queira enviar no corpo da requisição.
Por exemplo, se você quiser enviar um formulário HTML com dois campos – nome e e-mail – seu código pode ficar assim:
fetch(‘www.example.com/submit-form’, { method: ‘POST’, // Especifique o corpo do método HTTP: new FormData(document.querySelector(‘form’)) // Colete dados do formulário }) .then (response => response.text()) // Lê a resposta como texto .then(data => alert(data)) // Alerta a resposta
Esse código coletará dados de um formulário HTML e os enviará por meio de uma solicitação POST. Novamente, se a solicitação falhar, você desejará usar alguma lógica de tratamento de erros para lidar com a situação normalmente.
A API Fetch é incrivelmente poderosa e pode fazer muito mais do que esses dois exemplos. Com bastante criatividade e conhecimento dos métodos HTTP, você pode usar essa tecnologia para criar um aplicativos da web.
Tratamento de erros
Não importa o que você esteja tentando realizar com a Fetch API, é essencial ter uma boa estratégia de tratamento de erros. Isso é especialmente verdadeiro para solicitações POST, que geralmente exigem dados confidenciais.
A maneira mais simples de lidar com erros é com um bloco try/catch. Você pode agrupar seu código neste bloco e, em seguida, usar o método catch() para alertar um erro se algo der errado.
Por exemplo, se você estiver fazendo uma solicitação POST, seu código pode ficar assim:
try { fetch(‘www.example.com/submit-form’, { method: ‘POST’, // Especifique o corpo do método HTTP: new FormData(document.querySelector(‘form’)) // Colete dados do formulário }) .then(response => response.text()) // Lê a resposta como texto .then(data => alert(data)) // Alerta a resposta } catch (error) { alert(‘Ocorreu um erro!’ ); }
Este código irá alertar um erro se algo der errado. É uma maneira simples, mas eficaz, de lidar com erros normalmente.
Considerações finais sobre a API JavaScript Fetch
Como você pode ver, a Fetch API em JavaScript pode ser uma ferramenta potente para automatizar solicitações da web. Com apenas algumas linhas de código, você pode fazer solicitações HTTP e processar respostas sem precisar de bibliotecas ou pacotes extras.
Além disso, com o método JavaScript global fetch(), você pode facilmente recuperar dados de qualquer URL sem problemas de segurança entre origens ou solicitações AJAX complicadas. Além disso, com seu suporte para Promises, você pode garantir que seu código seja executado da maneira mais eficiente possível, sem tempos de espera desnecessários. Comece hoje mesmo e veja como o trabalho do navegador da Web pode ser muito mais simples.
