Como configurar query string em GET request

Neste artigo você vai aprender a como configurar query string em GET request, com JavaScript, este código pode ser utilizado em Node também

Fala programador(a), beleza? Bora aprender mais sobre requisições com JavaScript!

Para resolver o nosso problema, podemos utilizar a fetch API

Que nos permite fazer requisições assíncronas, e é nativa

Este recurso é um bom substituo para o Axios, por exemplo

Ao criar a requisição, podemos também utilizar um objeto chamado URLSearchParams, que lida diretamente com query string

Veja um exemplo de código:

async function getData() {

  const req = (
    'https://https://url.da.api/recurso?' +
    new URLSearchParams({ config: "1", param: 2 }).toString()
  );

  const data = await fetch(req).then(response => response.json());
    
  console.log(data)
}

getData();

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Como a requisição é assíncrona, utilizei async e await para esperar a resposta

Veja que config e param, são os parâmetros da query string

Você precisa substituir os dados fictícios pelos dados da sua requisição

Deixe um comentário contando o que achou desta solução 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você aprendeu a como configurar query string em GET request

Utilizamos a fetch API, que faz requisições assíncronas, muito utilizada para comunicação com APIs

E também o objeto URLSearchParams, que lida justamente com parâmetros de URL

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Por que não montar a query string na mão?

Dá pra concatenar tudo com + e ponto de interrogação, claro

Só que aí tu vira o responsável por cada detalhe chato: espaço no meio do valor, acento, & que faz parte do texto, sinal de igual perdido

E é assim que nasce aquele bug que só aparece quando o usuário digita "café com leite" no campo de busca 🙂

O URLSearchParams faz esse trabalho sujo por você

Tu entrega um objeto com chave e valor, ele te devolve a string já codificada, pronta pra colar na URL

É a mesma lógica de quando você usa um helper de formulário: você cuida dos dados, a ferramenta cuida do formato

Tome cuidado com a resposta que volta com erro:

O exemplo acima resolve o caso feliz

Mas requisição na vida real falha: rota errada, token vencido, API fora do ar

E aí você tenta ler o json de uma resposta que não tem json nenhum, e o erro que aparece no console não tem nada a ver com o problema de verdade

Já me ferrei bonito assim, caçando bug no lugar errado por causa disso

Por isso vale checar o status antes de ler o corpo:

async function getData() {
const url = 'https://url.da.api/recurso?' + new URLSearchParams({ config: "1", param: 2 }).toString()

try {
const response = await fetch(url)

if (!response.ok) {
throw new Error('A API respondeu com status ' + response.status)
}

const data = await response.json()

console.log(data)
} catch (erro) {
console.error('Deu ruim na requisição:', erro)
}
}

getData()

Duas linhas a mais e teu código para de mentir sobre o que aconteceu

Esse é o pedaço que separa código de tutorial de código que você deixa rodando em produção

E quando os parâmetros são dinâmicos?

No mundo real esses valores raramente são fixos

Eles vêm de um filtro de busca, de um formulário, de um estado da tela

O problema é que campo vazio também vira parâmetro, e a URL fica com aquele lixo pendurado no final

A solução é limpar o objeto antes de montar a string:

const filtros = { busca: termo, categoria: categoria, pagina: 1 }

const limpos = {}

if (valor !== '' && valor !== undefined && valor !== null) {
}
})

const url = 'https://url.da.api/recurso?' + new URLSearchParams(limpos).toString()

Agora só entra na URL o que realmente tem valor

Simples, mas evita muita requisição estranha chegando na API

O que NÃO mandar na query string:

Requisição GET carrega os dados na própria URL, e não no corpo

Parece detalhe, mas muda o que é seguro colocar ali

URL costuma ficar registrada em log de servidor, em histórico de navegador e em ferramenta de monitoramento

Ou seja: senha, token e dado pessoal não são candidatos a virar parâmetro de query string

Pra esse tipo de informação, o caminho é outro método de requisição, com os dados no corpo, ou o cabeçalho apropriado

Query string é pra filtro, página, ordenação, busca, esse tipo de coisa