Angular 2 - Obtendo dados com Http (Get)

 Neste artigo vou mostrar como podemos obter informações usando o método Htttp.get com o Angular 2 e o Visual Studio Code.

Se você esta chegando agora e não sabe o que é esse tal de Angular 2, leia os artigos abaixo que mostram como configurar o ambiente e criar uma aplicação Angular 2.

A biblioteca HTTP do Angular fornece o cliente Http para a comunicação com o servidor. O método Get() é o método do cliente Http que usa o método HTTP GET para se comunicar com o servidor usando uma URL HTTP.

Precisamos passar a URL HTTP para o método Http.get() e ele vai retornar um Observable sendo que para ouvir os valores de Observable, precisamos subscrevê-lo (subscribe).

Podemos também buscar diretamente o valor Observable em nosso template HTML usando um pipe assíncrono. Além disso, o Observable pode ser convertido em Promise usando o método toPromise().

O método Http.get() se comunica com o servidor quando buscamos valores Observable ou Promise.

Vejamos a sintaxe usada no Angular:

get(url: string, options?: RequestOptionsArgs) : Observable<Response>

get() - é o método da API Angular Http que interage com o servidor usando o método HTTP GET. Ele aceita uma URL HTTP e retorna uma instância de Observable. Usar RequestOptionsArgs é opcional

Para usar os recursos do Http.Get precisamos fazer o seguinte:

1 - precisamos importar a biblioteca HttpModule em @NgModule usando o metada imports na aplicação module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

@NgModule({
---------
---------
  imports: [    
        BrowserModule,
        HttpModule
  ]
---------
---------
})
 

2 - Precisamos realizar a comunicação com servidor em uma classe service e não em um componente. Na classe de serviço usamos a injeção de dependência no construtor da classe para obter uma instância Http: 

constructor(private http:Http) { }
3 - Precisamos passar a UTL para o método http.get()
Observable<Response> ob = this.http.get(this.url);
Observable ou Promise ?

Podemos usar Observable ou Promise com http.get().

Observable é uma API RxJS e é uma representação de qualquer conjunto de valores em qualquer período de tempo. Todos os métodos Http Angular retornam Observable.

Ele fornece métodos como :

  1. map() - onde map() aplica uma função a cada valor emitido pela fonte Observable e retorna finalmente uma instância de Observable;
  2. catch() - é chamado quando ocorre um erro retornando também Observable;

Neste artigo vamos acessar um serviço pronto localizado neste link: http://www.jsontest.com/ sendo que vamos acessar o end point : http://date.jsontest.com para retornar a data no seguinte formato JSON: 

{
   "time": "03:53:25 AM",
   "milliseconds_since_epoch": 1362196405309,
   "date": "03-02-2013"
}

Acessando dados remotos com Http.Get

Crie uma pasta para organizar os seus projetos e a seguir crie um novo projeto Angular usando o comando : ng new acessowebapi

1- No arquivo app.module.ts importe a biblioteca HttpModule :

import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

2 - Crie o serviço HttpTestService no arquivo http-test.service.ts usando o seguinte comando do Angular CLI : ng g service http-test

Inclua o código abaixo neste arquivo:

import { Injectable } from '@angular/core';
import { Http, Response } from "@angular/http";
import 'rxjs/add/operator/map';
import { Observable } from "rxjs/Observable";

@Injectable()
export class HttpTestService {
  constructor(private _http : Http) { }
    getCurrentTime(){
              return this._http.get('http://date.jsontest.com')  
             .map(res=> res.json()); 
    }
}

Temos o serviço HttpTestService definindo o método getCurrentTime() que usa o método http.get() para obter a data e hora da url : http://date.jsontest.com.

Até este momento apenas configuramos o serviço http para fazer uma requisição, e, usando o operador map estamos obtendo o resultado json que vem no response.

Lembre-se que a requisição será feita somente após subscrevemos o serviço usando subscribe.

3 - Abra o arquivo app.component.ts e altere o seu código conforme abaixo:

import { HttpTestService } from './http-test.service';
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
           <p>
          <Label>Acessando dados de : http://date.jsontest.com com get()</Label>  
          </p>
          <button (click)="onTestGet()">Teste GET Request</button>
          <p>Resultado : {{getData}}</p>
  ` ,
  providers : [HttpTestService] 
})
export class AppComponent {
   getData :  string;
   constructor(private httpService : HttpTestService){}
   onTestGet() {
       this.httpService.getCurrentTime()
       .subscribe(
          data => this.getData = JSON.stringify(data),
          error => alert(error),
          () => console.log("acesso a webapi get ok...")
       );
   }
app.component.ts

Neste código temos :

  1. Importamos o serviço HttpTestService : import { HttpTestService } from './http-test.service';
  2. Definimos uma view no template onde temos um Button e no evento Click disparamos o método onTestGet()
  3. Definimos o método onTestGet() onde usamos o método getCurrentTime do serviço;

O mais importante neste código é o subscribe que vai efetivamente fazer com que a requisição seja feita.

Executando o projeto iremos obter:

Na segunda parte do artigo vou mostrar como acessar uma API para obter a previsão do tempo.

Pegue o projeto , sem as referências, aqui :   Angular_HttpGet.zip

"Ora, o fim do mandamento é o amor de um coração puro, e de uma boa consciência, e de uma fé não fingida."
1 Timóteo 1-5

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti