Enviando Parâmetros de URL em Requisições HTTP no Angular

Neste artigo você aprenderá a enviar parâmetros de URL em requisições HTTP no Angular, para você poder resgatar nos componentes

Fala programador(a), beleza? Bora aprender mais sobre Angular!

No desenvolvimento de aplicações Angular, uma necessidade comum é enviar parâmetros de URL em requisições HTTP.

Isso pode ser essencial para filtrar dados, realizar pesquisas ou passar informações específicas para APIs.

Este artigo explora como manipular e passar argumentos de URL em requisições HTTP no Angular, utilizando o módulo HttpClient.

Compreendendo Parâmetros de URL em Requisições HTTP

Parâmetros de URL, frequentemente conhecidos como query strings, são uma maneira padrão de enviar dados para o servidor em uma requisição HTTP GET.

Por exemplo, em uma URL como https://api.exemplo.com/itens?categoria=livros&precoMaximo=50, os parâmetros categoria e precoMaximo são enviados ao servidor.

Implementando Requisições HTTP com Parâmetros no Angular

O Angular fornece o módulo HttpClient para realizar operações HTTP. Vamos explorar como usar esse módulo para enviar parâmetros de URL.

Configuração Inicial

Antes de começar, certifique-se de que o módulo HttpClientModule está importado em seu módulo Angular (AppModule ou outro módulo relevante).

Exemplo de Importação do HttpClientModule

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
    // outros módulos...
  ],
  // declarações, provedores, etc...
})
export class AppModule { }

Construindo uma Requisição HTTP com Parâmetros

Agora, vamos construir uma requisição HTTP GET com parâmetros de URL.

Serviço Angular com HttpClient

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}

  obterItensComParametros(categoria: string, precoMaximo: number) {
    let params = new HttpParams()
      .set('categoria', categoria)
      .set('precoMaximo', precoMaximo.toString());

    return this.http.get('https://api.exemplo.com/itens', { params });
  }
}

Neste exemplo, usamos HttpParams para construir os parâmetros de URL. O método set é usado para adicionar parâmetros individualmente.

Uso do Serviço no Componente

Com o serviço configurado, podemos usá-lo em um componente Angular para fazer a requisição com os parâmetros desejados.

Exemplo de Componente Angular

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-meu-componente',
  template: `<!-- Template aqui -->`
})
export class MeuComponente implements OnInit {
  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.obterItensComParametros('livros', 50).subscribe(
      dados => {
        console.log(dados);
      },
      erro => {
        console.error(erro);
      }
    );
  }
}

Neste componente, invocamos o método obterItensComParametros do nosso serviço, passando os valores desejados para os parâmetros de URL.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Manipular e passar parâmetros de URL em requisições HTTP é uma prática comum no desenvolvimento de aplicações Angular.

Utilizando o módulo HttpClient e a classe HttpParams, podemos construir requisições HTTP de forma flexível e eficiente, passando informações necessárias para APIs ou serviços externos.

Esta abordagem permite uma comunicação eficaz com o servidor, facilitando a implementação de funcionalidades como filtros, buscas e outras operações baseadas em dados enviados via URL.

Ao dominar estas técnicas, você pode aprimorar a interatividade e a funcionalidade das suas aplicações Angular, garantindo uma experiência de usuário mais rica e personalizada.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.