1

Realizando uma requisição get() no Angular 8 (Básico)

#Angular
Aluizio Junior
Aluizio Junior

O objetivo desse artigo é realizar uma requisição do tipo get() de uma maneira limpa, simples e de fácil visualização para fins didáticos.

Espero que seja um ponto de partida para aqueles que ainda estão com dificuldades para compreender estes conceitos.


Antes de começar, precisamos do servidor que foi criado em: https://web.digitalinnovation.one/articles/simulando-um-servidor-com-json-server-basico?back=%2Farticles&page=1&order=oldest


1 - Crie uma classe de serviço digitando no terminal: “ng g s core/home” e nela vamos ter o seguinte código:


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

@Injectable({
providedIn: 'root'
})
export class HomeService {

private readonly url = 'http://localhost:3000/usuario';
constructor(private http: HttpClient) { }

  listar(){
    return this.http.get(this.url);
  }
}



2 – A primeira coisa que temos em nosso HomeService é uma variável contendo o url do nosso json server. É bom deixá-la como “somente leitura”:


private readonly url = 'http://localhost:3000/usuario';


3 – Em seguida, dentro do construtor, vamos declarar o módulo “HttpClient”, pois ele é quem sabe fazer requisições get(), post(), put(), delete() e etc:


constructor(private http: HttpClient) { }


4 – Para utilizar o HttpClient precisamos também importar o módulo dentro de app.module.ts:

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

(...)

imports: [
  BrowserModule,
  AppRoutingModule,
  FormsModule,
  HttpClientModule
],


5 – Bem. Agora o nosso método de listagem vai fazer um get em nosso json server e o retorno dele será um Observable de Objeto. Já que o nosso banco json contém dados de usuário e nós queremos listar estes usuários, convém informar que queremos um observable de usuários. Para que isso seja possível, vamos criar uma interface: “ng g i shared/models/usuario” contendo seus respectivos parâmetros:


export interface Usuario {
  id: number;
  nome: string;
}


6 – Agora podemos tipar o nosso get() do método listar() da seguinte maneira:


return this.http.get<Usuario>(this.url);


7 – Agora é o seguinte. Este código vai retornar somente um usuário, mas o que nós precisamos mesmo é que o get retorne um array de usuários.


return this.http.get<Usuario[]>(this.url);


Nossa classe de serviço está ficando assim:


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Usuario } from '../shared/models/usuario';

@Injectable({
providedIn: 'root'
})
export class HomeService {

private readonly url = 'http://localhost:3000/usuario';
constructor(private http: HttpClient) { }

listar(){
  return this.http.get<Usuario[]>(this.url);
  }
}


8 – Crie um componente “ng g c home” e dentro de home.component.ts. escreva o seguinte código:


import { Component, OnInit } from '@angular/core';
import { HomeService } from '../core/home.service';
import { Usuario } from '../shared/models/usuario';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {    
    usuarios: Usuario[] = [];

    constructor(private servico: HomeService){}
    
    ngOnInit(): void {
      this.servico.listar();
      }
    }
      


8 – Criamos um array de usuários.

9 – Injetamos o nosso serviço dentro do construtor do componente

10 – Informamos ao angular, dentro do ngOnInit que, ao carregar o componente, carregue também a nossa lista de usuários que está na classe de serviço.


Agora vamos nos concentrar nesse método listar.


Como o HttpClient.get(), do método listar(), da classe de serviço, está nos retornando um Observable, então precisamos nos inscrever para obter o retorno dele.


11 – Adicione o subcribe no listar():


(...)
this.servico.listar().subscribe();
(...)


12 – Nesse momento, a resposta já está chegando em nosso component e o próximo passo é fazer com que a informação recebida seja atribuída de forma dinâmica naquele array de usuários que foi criado no começo do nosso componente:


(...)
this.servico.listar().subscribe(objetos => this.usuarios = objetos);
(...)


13 – Por último, vamos listar as informações desse array de usuários em nosso template:


<table width="150" border="1px">
  <thead>
    <th>Id</th>
    <th>Nome</th>
  </thead>
  <tbody *ngFor="let usuario of usuarios">
    <td> {{usuario.id}} </td>
    <td> {{usuario.nome}} </td>
  </tbody>
</table>


O “*ngFor” itera em nosso array e os bindings {{}} são usados sempre que quisermos exibir, no .html, valores de variáveis que estão no .ts do componente.


Lembre-se de colocar o seletor do component no arquivo app.component.ts:



O resultado deve ser isso:


Pronto!

2
17

Comentários (2)

0
Aluizio Junior

Aluizio Junior

28/03/2021 22:17

Valeu Alexandre Silva.

É pra galera que se sentir travada como eu estava um dia:)

1
A

Alexandre Silva

28/03/2021 16:37

Parabéns Aluizio

Entusiasta de Tecnologias Web

Brasil