Como fazer um GET com JavaScript (HTTP)

Neste artigo você vai aprender a como fazer um GET com JavaScript, uma requisição com o verbo GET do protocolo HTTP

Fala programador(a), beleza? Bora aprender mais sobre requests, GET, HTTP e também JavaScript!

Antigamente precisávamos utilizar o bom e velho xmlHttp, porém hoje temos acesso a API fetch

Tornando a requisição mais simples, baseada em promises

Veja uma utilização prática de fetch:

const minhaUrl = "http://localhost:3000/produtos"

fetch(minhaUrl).then(function(response) {

  return response.json();

}).then(function(data) {

  console.log(data);

}).catch(function() {

  console.log("Houve algum problema!");

});

Primeiramente ativamos o método fetch com a URL do seu request, então entramos no fluxo da promise

Que vai resolve cada passo em then’s, ou seja, o primeiro passo é a requisição que retorna os dados em JSON, a nossa resposta

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Depois podemos utilizar estes dados, no segundo then

Que é onde vamos dar destino a eles, ali já estarão em JSON pronto para uso

E por fim temos um bloco que catch, que é onde os possíveis erros vão cair, você tratá-los ali

E é isso! Request de GET super simples com o Fetch API =)

Conclusão

Neste artigo você aprendeu a como fazer um GET com JavaScript

Utilizamos o Fetch API, um recurso interessante que substitui o velho XMLHttpRequest

Lembrando que o Fetch possui todos os verbos do HTTP: GET, POST, UPDATE, DELETE e etc…

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

A mesma requisição, agora com async/await:

O exemplo de cima funciona bem, só que encadear then atrás de then cansa a vista

Com async/await tu escreve o mesmo GET numa leitura de cima pra baixo, quase como se fosse código síncrono

async function buscarProdutos() {
try {
const response = await fetch("http://localhost:3000/produtos")
const data = await response.json()

console.log(data)
} catch (erro) {
console.log("Houve algum problema!", erro)
}
}

buscarProdutos()

Repara que o await faz o papel dos then’s e o try/catch faz o papel do catch da promise

Mesma API fetch, mesmo resultado, MUITO mais legível 🙂

Por que o catch do fetch não pega o erro do servidor?

Essa aqui pega muita gente de surpresa

O catch do fetch só dispara quando a requisição nem sai do lugar: rede fora, endereço que não resolve, request bloqueado

Se o servidor responder que a rota não existe ou que deu erro interno, a promise RESOLVE normal e teu código segue como se estivesse tudo certo

Por isso vale checar o response.ok antes de chamar o json():

const response = await fetch(minhaUrl)

if (!response.ok) {
throw new Error("A requisição falhou com status " + response.status)
}

const data = await response.json()

Já me ferrei com isso… o console não acusava nada e o data vinha vazio

Como mandar parâmetros na URL do GET:

GET manda dado pela URL, na famosa query string

Dá pra concatenar string na mão, porém aí tu tem que lembrar de escapar espaço, acento e caractere especial

O URLSearchParams faz esse trabalho por você:

const params = new URLSearchParams({
categoria: "camisetas",
ordem: "preco"
})

const response = await fetch(`http://localhost:3000/produtos?${params}`)

Se você já montou formulário, é a mesma ideia: chave e valor, só que codificados do jeito certo pra URL

O resultado vira algo como /produtos?categoria=camisetas&ordem=preco

Enviando cabeçalhos no GET (token, tipo de conteúdo):

Quando a API pede autenticação, o dado vai no cabeçalho e não no corpo (GET não tem corpo, beleza?)

O fetch aceita um segundo argumento com as opções da requisição:

const response = await fetch(minhaUrl, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer SEU_TOKEN_AQUI"
}
})

O method: "GET" é opcional, porque é o que o fetch usa quando você não diz nada

Mas deixar escrito ajuda quem for ler teu código depois =)

Erros comuns na hora de fazer o GET:

Tome cuidado com esses três, eles respondem por boa parte do "aqui não funciona"

Erro de CORS: a requisição sai do navegador e a resposta é barrada porque o servidor não liberou a tua origem. Não existe gambiarra de front que resolva isso, o ajuste é do lado do servidor

Erro no response.json(): tu chamou o json() e o que voltou não era JSON, era uma página de erro em HTML. Troca por response.text() e olha na tela o que o servidor mandou de verdade

Usar o dado fora do fluxo: o fetch é assíncrono, se tu der console.log da variável fora do then (ou sem o await), ela ainda vai estar vazia

Bora testar? Roda o exemplo apontando pra uma URL que não existe e vê o que cai em cada caso