Como Fazer uma Solicitação HTTP GET em Javascript?

Você já se perguntou como os sites se comunicam entre si e trocam dados? Como você acessa informações de uma fonte online e as exibe em sua própria página da web? Como você envia solicitações e recebe respostas pela Internet?

Se você está curioso sobre essas perguntas, então você está no lugar certo. Neste post do blog, vou mostrar como fazer uma solicitação HTTP GET em Javascript, uma das maneiras mais comuns e úteis de interagir com APIs da web e como o Apidog pode ajudar você.

💡

Apidog é uma plataforma de colaboração de API tudo-em-um que fornece documentação de API, depuração de API, simulação de API e testes automatizados de API. Ele oferece recursos avançados para lidar com solicitações GET em javascript. Baixe o Apidog gratuitamente.

button

Mas primeiro, vamos entender o que é uma solicitação HTTP GET e por que você precisa dela.

O que é uma Solicitação HTTP GET?

HTTP significa Hypertext Transfer Protocol, que é um conjunto de regras que define como as mensagens são formatadas e transmitidas pela web. HTTP é a base da comunicação de dados para a World Wide Web.

Uma solicitação é uma mensagem que você envia a um servidor, pedindo alguma informação ou ação. Uma resposta é uma mensagem que o servidor envia de volta para você, contendo as informações ou resultado que você solicitou.

Uma solicitação GET é um tipo de solicitação HTTP que pede ao servidor para enviar alguns dados. Por exemplo, quando você digita uma URL em seu navegador, você está enviando uma solicitação GET ao servidor, pedindo a página da web que corresponde a essa URL. O servidor então responde com o código HTML da página da web, que seu navegador renderiza e exibe.

Uma solicitação GET tem dois componentes principais: uma URL e uma string de consulta. Uma URL é o endereço do recurso que você deseja acessar, como https://example.com. Uma string de consulta é uma parte da URL que contém algumas informações ou parâmetros adicionais, como ?name=John&age=25. Uma string de consulta começa com um ponto de interrogação (?) e consiste em pares de chave-valor separados por e comercial (&).

Uma solicitação GET se parece com isto:

https://example.com?name=John&age=25

Neste exemplo, estamos enviando uma solicitação GET para https://example.com, com dois parâmetros: name e age. O servidor usará esses parâmetros para processar nossa solicitação e nos enviar a resposta apropriada.

Por que você precisa de uma Solicitação HTTP GET?

Uma solicitação HTTP GET é útil quando você deseja recuperar alguns dados de um servidor web, sem alterar nada no servidor. Por exemplo, você pode querer obter os últimos artigos de notícias, relatórios meteorológicos, preços de ações ou perfis de usuários de uma fonte online.

No entanto, nem todos os servidores web estão abertos e acessíveis a qualquer um. Alguns servidores web exigem autenticação, autorização ou pagamento para acessar seus dados. Esses servidores web são chamados de APIs web.

Uma API web é uma interface de programação de aplicativos que permite que você interaja com um servidor web de forma programática, usando métodos e parâmetros pré-definidos. Uma API web atua como uma ponte entre sua aplicação e o servidor web, permitindo que você troque dados de maneira estruturada e padronizada.

Por exemplo, se você quiser obter a temperatura atual em Paris de uma API web meteorológica, poderá precisar enviar uma solicitação GET assim:

https://api.weather.com?city=Paris&key=123456

Neste exemplo, estamos enviando uma solicitação GET para https://api.weather.com, com dois parâmetros: city e key. O parâmetro city especifica a localização da qual queremos obter as informações meteorológicas, e o parâmetro key é um identificador exclusivo que comprova que estamos autorizados a usar a API web. A API web então responderá com a temperatura atual em Paris, em um formato que podemos facilmente analisar e usar em nossa aplicação.

Existem muitas APIs web disponíveis na internet, cobrindo vários domínios e tópicos. Algumas APIs web são gratuitas e abertas, enquanto outras são pagas e restritas. Algumas APIs web são simples e fáceis de usar, enquanto outras são complexas e avançadas. Algumas APIs web são bem documentadas e confiáveis, enquanto outras são mal documentadas e não confiáveis.

Como você encontra e escolhe a melhor API web para suas necessidades? Como você aprende a usar uma API web e quais parâmetros enviar? Como você trata erros e exceções ao usar uma API web? Como você otimiza o desempenho e a segurança de suas solicitações de API web?

Essas são algumas das perguntas que você pode encontrar ao trabalhar com APIs web. Felizmente, existe uma ferramenta que pode ajudá-lo com todos esses desafios e mais. Essa ferramenta se chama Apidog.

button

Como fazer solicitações HTTP GET em Javascript

Fazer solicitações HTTP GET em JavaScript é uma maneira comum de interagir com servidores ou APIs e recuperar dados. Existem vários métodos que você pode usar para fazer solicitações HTTP GET em JavaScript, como:

Como Enviar uma Solicitação GET em JavaScript Usando XMLHttpRequest

O objeto XMLHttpRequest é um recurso nativo do JavaScript empregado para se comunicar com servidores e carregar conteúdo em páginas da web sem atualizar o navegador. Quando você deseja buscar dados de um servidor, você utiliza a solicitação GET. Para enviar uma solicitação GET usando XMLHttpRequest em JavaScript com sucesso, é importante garantir que as seguintes etapas sejam realizadas corretamente:

Primeiro, crie um novo objeto XMLHttpRequest:

const xhr = new XMLHttpRequest();

Então, especifique a URL do endpoint da API para o qual você deseja fazer uma solicitação GET:

const url = 'https://api.example.com/data';

Em seguida, use o método open() para inicializar a solicitação:

xhr.open('GET', url);

Então, use a propriedade onreadystatechange para definir uma função de retorno de chamada que será chamada quando o estado da solicitação mudar:

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

Finalmente, use o método send() para enviar a solicitação:

xhr.send();

Neste exemplo, estamos fazendo uma solicitação GET para o endpoint da API especificado pela variável url. Estamos usando a propriedade onreadystatechange para definir uma função de retorno de chamada que será chamada quando o estado da solicitação mudar. Quando a solicitação estiver completa e o código de status for 200, estamos registrando o texto da resposta no console.

Como Fazer uma Solicitação GET com a Fetch API

A Fetch API é uma interface moderna do JavaScript que opera em promessas, permitindo o envio de solicitações HTTP de navegadores e Node.js (a partir da versão 18) para servidores. Ela pode realizar as mesmas tarefas que o objeto XMLHttpRequest, mas de uma maneira mais amigável ao JavaScript devido ao seu uso de promessas. Além disso, pode ser utilizada por outras tecnologias como Service Workers.

Vamos explorar como fazer uma solicitação HTTP GET usando a Fetch API.

Primeiro, crie um novo arquivo JavaScript e adicione o seguinte código para importar a Fetch API:

import fetch from 'node-fetch';

Em seguida, especifique a URL do endpoint da API para o qual você deseja fazer uma solicitação GET:

const url = 'https://api.example.com/data';

Então, use a Fetch API para fazer a solicitação GET:

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erro:', error));

Finalmente, execute o arquivo JavaScript para ver os resultados da solicitação GET.

A Fetch API oferece uma maneira simples e intuitiva de fazer solicitações HTTP GET em JavaScript. Seguindo essas etapas, você pode facilmente fazer solicitações GET para qualquer endpoint de API.

Aqui está um exemplo de como fazer uma solicitação HTTP GET usando a Fetch API para recuperar dados da API OpenWeatherMap:

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erro:', error));

Neste exemplo, estamos fazendo uma solicitação GET para a API OpenWeatherMap para recuperar dados meteorológicos para Seattle. Estamos passando nossa chave de API e o nome da cidade da qual queremos obter dados como parâmetros de consulta na URL.

Seguindo essas etapas, você pode facilmente fazer solicitações HTTP GET usando a Fetch API em JavaScript.

Fazendo uma Solicitação HTTP GET com Axios

Axios é uma biblioteca cliente HTTP. Esta biblioteca é baseada em promessas que simplificam o envio de solicitações HTTP assíncronas para endpoints REST. Vamos enviar uma solicitação GET para o endpoint da API JSONPlaceholder Posts.

Axios, ao contrário da Fetch API, não é nativo. Isso significa que você precisa instalar o Axios em seu projeto JavaScript.

Aqui estão as instruções passo a passo:

Primeiro, instale o Axios usando npm ou yarn:

npm install axios

yarn add axios

Em seguida, importe o Axios no seu arquivo JavaScript:

import axios from 'axios';

Então, especifique a URL do endpoint da API para o qual você deseja fazer uma solicitação GET:

const url = 'https://api.example.com/data';

Finalmente, use o Axios para fazer a solicitação GET:

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Erro:', error));

Neste exemplo, estamos fazendo uma solicitação GET para o endpoint da API especificado pela variável url. Estamos usando o método then para tratar a resposta e o método catch para tratar quaisquer erros que possam ocorrer.

Aqui está outro exemplo de como fazer uma solicitação HTTP GET usando Axios para recuperar dados da API OpenWeatherMap:

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Erro:', error));

Seguindo essas etapas, você pode facilmente fazer solicitações HTTP GET usando a biblioteca Axios em JavaScript.

Como enviar uma solicitação GET usando jQuery?

Fazer solicitações HTTP em jQuery é relativamente simples e semelhante à Fetch API e ao Axios. Para fazer uma solicitação GET, você precisará primeiro instalar jQuery ou usar seu CDN em seu projeto:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Em seguida, especifique a URL do endpoint da API para o qual você deseja fazer uma solicitação GET:

const url = 'https://api.example.com/data';

Então, use o método $.get() para fazer a solicitação GET:

$.get(url, function(data) {
  console.log(data);
});

Finalmente, execute seu arquivo JavaScript para ver os resultados da solicitação GET.

Neste exemplo, estamos fazendo uma solicitação GET para o endpoint da API especificado pela variável url. Estamos usando o método $.get() para fazer a solicitação e a função de retorno de chamada function(data) para tratar a resposta.

Aqui está outro exemplo de como fazer uma solicitação HTTP GET usando jQuery para recuperar dados da API OpenWeatherMap:

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

$.get(url, function(data) {
  console.log(data);
});

Tratando Erros em Solicitações HTTP GET em Javascript

Ao fazer uma solicitação HTTP GET, é importante tratar os erros que podem ocorrer. Aqui estão algumas boas práticas para lidar com erros na API REST:

Códigos de Status HTTP: Quando um cliente faz uma solicitação a um servidor HTTP, o servidor deve notificar o cliente se a solicitação foi tratada com sucesso ou não. O HTTP realiza isso com cinco categorias de códigos de status: 100 - Informativo, 200 - Sucesso, 300 - Redirecionamento, 400 - Erro do cliente e 500 - Erro do servidor. Com base no código de resposta, um cliente pode inferir o resultado de uma solicitação específica.
Tratamento de Erros: O primeiro passo no tratamento de erros é fornecer ao cliente um código de status apropriado. Além disso, podemos precisar fornecer mais informações no corpo da resposta. A maneira mais simples de tratar erros é responder com um código de status apropriado. Aqui estão alguns códigos de resposta comuns: 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 412 Precondition Failed, 500 Internal Server Error e 503 Service Unavailable. Embora básicos, esses códigos permitem que um cliente entenda a natureza geral do erro que ocorreu. Sabemos que se recebermos um erro 403, por exemplo, não temos permissões para acessar o recurso que solicitamos. Em muitos casos, porém, precisamos fornecer detalhes adicionais em nossas respostas.
Tratamento de Erros para Respostas HTTP Falhadas e Erros de Rede: A função fetch() gerará automaticamente um erro para erros de rede, mas não para erros HTTP, como respostas 4xx ou 5xx. Para erros HTTP, podemos verificar a propriedade response.ok para ver se a solicitação falhou e rejeitar a promessa nós mesmos chamando return Promise.reject(error).
Trate erros de solicitação: Quando um erro ocorre, você pode obter detalhes sobre o que falhou para informar seu usuário. Em alguns casos, você também pode tentar automaticamente a solicitação novamente. Um aplicativo deve fornecer ao usuário um feedback útil quando o acesso aos dados falha. Um objeto de erro bruto não é particularmente útil como feedback.

O que é Apidog e Por que Você Deveria Usá-lo?

Apidog é uma plataforma baseada na web que permite que você descubra, teste e integre APIs web com facilidade. O Apidog é projetado para facilitar sua vida ao trabalhar com APIs web, fornecendo as seguintes características e benefícios:

Descobrir: O Apidog ajuda você a encontrar as melhores APIs web para suas necessidades, fornecendo uma lista curada e pesquisável de milhares de APIs web, cobrindo várias categorias e tópicos.
Testar: O Apidog ajuda você a testar e depurar APIs web, fornecendo uma interface interativa e amigável que permite enviar solicitações e receber respostas em tempo real. Você pode facilmente personalizar os parâmetros, cabeçalhos e corpo de suas solicitações, e ver o status, cabeçalhos e corpo das respostas. Você também pode ver o tempo de resposta, tamanho e formato de cada solicitação e resposta, e compará-los com diferentes APIs web. Você também pode salvar, compartilhar e exportar suas solicitações e respostas, e usá-las em suas próprias aplicações.
Integrar: O Apidog ajuda você a integrar APIs web com suas aplicações, fornecendo os trechos de código e documentação de cada API web. Você pode escolher entre diferentes linguagens de programação e frameworks, como...

Se você está interessado em usar o Apidog, pode baixá-lo gratuitamente e começar a usá-lo imediatamente.

button

Mas chega de conversa, vamos ver o Apidog em ação. Na próxima seção, vou mostrar como usar o Apidog para fazer uma solicitação HTTP GET em Javascript, utilizando uma API web simples e divertida.

Como gerar uma Solicitação HTTP GET em Javascript com Apidog

O Apidog pode ajudá-lo a gerar código javascript, tudo o que você precisa fazer é:

Passo 1: Abra o Apidog e clique no botão "Nova Solicitação" para criar uma nova solicitação.

Passo 2: Selecione Solicitação GET

Passo 3: Insira a URL do endpoint da API que você deseja e mude para a interface de Design.

Passo 4: Clique em Gerar Código do Cliente.

Passo 4: Selecione o código Javascript que você deseja gerar, pode ser Fetch, Axios, Jquery, XHR e mais. Basta copiar e colar no seu projeto.

Como Testar Solicitação HTTP GET em Javascript Usando Apidog?

Para testar a solicitação HTTP GET usando o Apidog, você precisa seguir estas etapas simples:

Abra o Apidog e clique no botão "Nova Solicitação" para criar uma nova solicitação.

Selecione "POST" como o método da solicitação.

3. Insira a URL do endpoint da API

Então clique no botão “Enviar” para enviar a solicitação para a API.

Como você pode ver, o Apidog mostra a URL, parâmetros, cabeçalhos e corpo da solicitação, e o status, cabeçalhos e corpo da resposta. Você também pode ver o tempo de resposta, tamanho e formato da solicitação e resposta, e compará-los com diferentes APIs web.

Melhores Práticas para Solicitações HTTP GET em Javascript

Enviar solicitações HTTP GET bem elaboradas é crucial para uma comunicação eficiente e segura com os servidores web. Otimizá-las para segurança, desempenho e escalabilidade é essencial para um sistema robusto e eficiente. Aqui estão algumas melhores práticas a seguir:

Segurança

Codificação de URL: Evite incluir caracteres especiais diretamente na URL. Codifique-os com a codificação de URL para prevenir potenciais vulnerabilidades de injeção de código.
HTTPS: Sempre use HTTPS para comunicação segura. Ele criptografa a solicitação e a resposta, protegendo os dados sensíveis de escuta.
Validação de parâmetros: Valide todos os parâmetros recebidos na solicitação GET no lado do servidor. Isso ajuda a prevenir manipulações e potenciais ataques.
Limitação de taxa: Implemente limitação de taxa para prevenir ataques DDoS e carga excessiva no servidor.
Evitar dados sensíveis: Não passe dados sensíveis através de parâmetros GET. Use solicitações POST para transmissão segura de tais informações.

Desempenho

Cache: Aproveite o cache do navegador para recursos estáticos, como imagens e scripts. Isso reduz a carga do servidor e melhora os tempos de carregamento da página.
Minimizar parâmetros: Mantenha o número de parâmetros da string de consulta ao mínimo. Parâmetros excessivos podem diminuir o desempenho.
Compressão Gzip: Habilite a compressão Gzip no lado do servidor para reduzir o tamanho das respostas e melhorar os tempos de transferência.
Use CDN: Considere usar uma Rede de Distribuição de Conteúdo (CDN) para distribuir geograficamente seu conteúdo e melhorar os tempos de resposta para usuários em diferentes locais.

Escalabilidade

Paginando: Use paginação para exibir grandes conjuntos de dados. Isso evita enviar e processar todo o conjunto de dados de uma só vez, reduzindo a carga do servidor e melhorando a capacidade de resposta.
Filtragem de recursos: Permita filtrar resultados com base em critérios definidos pelo usuário para reduzir o volume de dados recuperados e a carga de trabalho do servidor.
Solicitações assíncronas: Utilize solicitações assíncronas para buscar recursos não críticos. Isso libera a thread principal para outras tarefas e melhora a experiência do usuário.
Design da API: Projete sua API de forma eficiente para solicitações GET. Use convenções de nomenclatura claras e consistentes para recursos e parâmetros.
Statelessness: HTTP é um protocolo sem estado. Certifique-se de que as solicitações GET permaneçam sem estado. Qualquer solicitação deve retornar o mesmo resultado, independentemente de solicitações anteriores.

Dicas Adicionais:

Otimizar respostas do servidor: Evite processamento e formatação desnecessários de dados na resposta do servidor.
Monitorar e analisar sua API: Monitore o uso da API e métricas de desempenho para identificar gargalos e áreas para melhoria.
Usar bibliotecas e frameworks seguros: Utilize bibliotecas e frameworks bem estabelecidos e seguros para construir e enviar solicitações HTTP.

Seguindo esses métodos recomendados, você pode garantir que suas solicitações HTTP GET sejam seguras e otimizadas, promovendo uma aplicação ou API web resiliente e eficaz. Lembre-se de que estes são princípios gerais e as necessidades e limitações particulares do seu projeto podem exigir estratégias alternativas. Sempre teste sua implementação para garantir que atenda aos seus requisitos.

Conclusão

Neste post do blog, aprendemos como fazer uma solicitação HTTP GET em Javascript. Também vimos como o Apidog nos ajuda a testar e depurar APIs web, fornecendo uma interface amigável e interativa que nos permite enviar solicitações e receber respostas em tempo real. Também vimos como o Apidog nos ajuda a integrar APIs web em nossas aplicações, fornecendo trechos de código e documentação de cada API web.

button

Esperamos que você tenha aprendido algo novo e útil. Se você quiser saber mais sobre APIs web, Apidog ou Javascript.