Bom gostaria de trazer algumas mensagens de erro no JSON para essa classe abaixo e não sei como fazer isso, minha conexão com o Banco de Dados está OK e voltando o JSON certinho, eu gostaria de ler os Response que estou enviando de volta, mas não sei como fazer isso, pesquisei na internet e não achei, gostaria por exemplo de fazer o seguinte por exemplo se vir um erro Http 404 eu faço alguma coisa, erro 500 outra coisa e sucesso outra coisa, na verdade Mostrar um Modal na tela mostrando essas mensagens que viria no Response, alguém tem uma ideia de fazer isso aqui no service? no retorno do JSON.
Um exemplo como eu queria:
saveUsuario(usuario: Usuario): Observable<Usuario> {
if (http code 404 ) {
chama modal
} else if (http code 500) {
chama modal
}
}
Minha Classe - Service:
import { Injectable } from '@angular/core';
import { Usuario } from "./usuario";
import { Http, Response } from "@angular/http";
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch';
import { Observable } from "rxjs/Observable";
@Injectable()
export class UsuarioService {
private apiUrl = 'http://localhost:8080/usuario';
constructor(private http: Http) {
}
saveUsuario(usuario: Usuario): Observable<Usuario> {
return this.http.post(this.apiUrl, usuario)
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
deleteUsuarioById(codigoUsuario: number): Observable<boolean> {
return this.http.delete(this.apiUrl + '/' + codigoUsuario)
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
updateUsuario(usuario: Usuario): Observable<Usuario> {
return this.http.put(this.apiUrl, usuario)
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
findById(codigoUsuario: number): Observable<Usuario> {
return this.http.get(this.apiUrl + '/' + codigoUsuario)
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Error'));
}
findAll(): Observable<Usuario[]> {
return this.http.get(this.apiUrl)
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
login(loginUsuario: string, senhaUsuario: string): Observable<Response> {
return this.http.get(this.apiUrl + '/login/' + loginUsuario + '/senha/' + senhaUsuario)
.map((res: Response) => {
if (res) {
if (res.status === 201) {
return [{ status: res.status, json: res }]
} else if (res.status === 200) {
return [{ status: res.status, json: res }]
}
}
}).catch((error: any) => {
if (error.status === 500) {
return Observable.throw(new Error(error.status));
}
else if (error.status === 400) {
return Observable.throw(new Error(error.status));
}
else if (error.status === 409) {
return Observable.throw(new Error(error.status));
}
else if (error.status === 406) {
return Observable.throw(new Error(error.status));
}});
}
}
Minha Classe - Component:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl, FormGroup, Validators, FormBuilder } from "@angular/forms";
import { UsuarioService } from "../usuario.service";
import { Usuario } from "../usuario";
import { ActivatedRoute, Router } from '@angular/router';
import { HttpModule } from '@angular/http';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-usuario-login',
templateUrl: './usuario-login.component.html',
styleUrls: ['./usuario-login.component.css'],
providers: [UsuarioService]
})
export class UsuarioLoginComponent implements OnInit {
private usuarioForm : FormGroup;
constructor(private activatedRoute: ActivatedRoute,
private router: Router,
private usuarioService: UsuarioService,
private formBuilder: FormBuilder,
private toastr: ToastrService) {
this.createForm();
}
createForm() {
this.usuarioForm = this.formBuilder.group({
loginUsuario: ['', Validators.required ],
senhaUsuario: ['', Validators.required ]
});
}
ngOnInit() {
}
error: string;
data: any;
onSubmit(loginUsuario, senhaUsuario) {
this.usuarioService.login(loginUsuario, senhaUsuario)
.subscribe(
data => this.data = data,
err => this.error = <any>err.message);
}
}
Modelo JSON - Retorno:
{
"code": 4,
"message": "Sucesso"
}
Consegui chegar no meu Componenent com o JSON assim:
Meu Service:
login(loginUsuario: string, senhaUsuario: string): Observable<Response> {
return this.http.get(this.apiUrl + '/login/' + loginUsuario + '/senha/' + senhaUsuario)
.map((res: Response) => {
if (res) {
if (res.status === 201) {
return [{ json: res._body }]
} else if (res.status === 200) {
return [{ json: res._body }]
}
}
}).catch((error: any) => {
if (error.status === 500) {
return Observable.throw(new Error(error.status));
}
else if (error.status === 400) {
return Observable.throw(new Error(error.status));
}
else if (error.status === 409) {
return Observable.throw(new Error(error.status));
}
else if (error.status === 406) {
return Observable.throw(new Error(error.status));
}});
}
Meu Component:
onSubmit(loginUsuario, senhaUsuario) {
this.usuarioService.login(loginUsuario, senhaUsuario).subscribe(
data => {
console.log(data);
},
error => {
console.error("Error saving food!");
return Observable.throw(error);
}
);
Como pegar dentro do DATA agora e pegar esse Entity que está dentro do DATA.