1

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.

2
  • A dúvida é como saber qual código http de erro o seu backend retornou?
    – mercador
    14/01/2018 às 3:26
  • a dúvida é como pegar aqui no Angular esses retornos por exemplo quando o erro for 404, 500 ou outro. Quero pegar o Response aqui no Angular e tratar esses erros pra enviar mensagens na Tela. 14/01/2018 às 13:41

1 Resposta 1

1

Você pode fazer algo assim:

saveUsuario(usuario: Usuario): Observable<Usuario> {
    return this.http.post(this.apiUrl, usuario)
        .catch((error: any) => {
            return Observable.throw(error);
        });
}

Utilizando Observable.throw você emite nenhum item para o Observer e imediatemente emite uma notificação de erro. Tal notificação pode ser manipulada no callback de erro.

Para tratar o erro dentro do seu componente:

@Component({
    selector: 'meu-app',
    template: `
        <div>Código: {{ erro.code }}</div>
        <div>Mensagem: {{ erro.message }}</div>
    `
})
export class AppComponent {
    erro: any;
    data: any;

    constructor(private usuarioadminservice: UsuarioAdminService ) {}
    ngOnInit() {
        this.usuarioadminservice.saveUsuario(null)
            .subscribe(
                data => this.data = data,
                err  => this.erro = <any>err
            );
    }
}
13
  • isso amigo, é isso mesmo que eu queria, mas como eu pego essa informação depois aonde ele está chamando no Component do Angular? porque ele está retornando um Observable. 14/01/2018 às 15:16
  • @EdersonCoelho no caso você quer passar o código do erro para o componente?
    – mercador
    14/01/2018 às 16:28
  • Sim, isso mesmo 14/01/2018 às 17:36
  • @EdersonCoelho editei a resposta.
    – mercador
    15/01/2018 às 11:17
  • Estou quase no caminho, incluí aqui exatamente o que eu quero fazer, pra você entender o JSON que eu coloquei, é exatamente o que vai voltar nesse caso preciso pegar o Código e a Mensagem que está dentro do Entity dentro do JSON passar pro Component e pegar essa Mensagem e exibir na tela. 16/01/2018 às 3:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .