Home / Questions / 277790
Accepted
Alan
Asked: 2020-07-10 09:29:51 +0800 CST 2020-07-10 09:29:51 +0800 CST

如何在 Angular 7+ 中捕获从服务器发送的错误？

  • 772

我最近开始接触，我想知道捕获和显示从 REST API 服务器收到的错误的最佳方法是什么，我有以下内容：

服务

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


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

  constructor(public _http: HttpClient) {}

  crearUsuario( usuario: Usuario){

    let url = `http://localhost:3000/usuario`;

    return this._http.post(url, usuario);

  }

}

零件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UsuarioService } from '../services/service.index';
import { Usuario } from '../models/usuario.model';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./login.component.css']
})
export class RegisterComponent implements OnInit {

  forma: FormGroup;

  constructor( public _usuarioService: UsuarioService) { }

  ngOnInit() {

    this.forma = new FormGroup({
      // Valor por defecto y validaciones
      nombre: new FormControl('test', Validators.required ),
      correo: new FormControl('[email protected]', [Validators.required, Validators.email]),
      password: new FormControl('123456', Validators.required),
      confPassword: new FormControl('123456', Validators.required),
      condiciones: new FormControl(true)
    }, { validators: this.verificarPassword('password', 'confPassword')});

  }

  verificarPassword( campo1: string, campo2: string){
    return ( group: FormGroup) => {
      let pass1 = group.controls[campo1].value;
      let pass2 = group.controls[campo2].value;

      if( pass1 === pass2 ) return null;

      return {
        sonIguales: true
      }
    }
  }

  registrarUsuario(forma: FormControl){
    console.log(forma);

    let usuario = new Usuario(
      this.forma.value.nombre,
      this.forma.value.correo,
      this.forma.value.password
    )

    this._usuarioService.crearUsuario(usuario).subscribe( result =>{


      console.log(result );

    });

  }

}

返回的错误是 astatus 500如果注册失败， astatus 200如果请求成功。

我想要做的是在创建帐户时让用户更清楚，显示错误来自哪里，在这种情况下，这将是因为电子邮件已经存在。

首先，谢谢:)

javascript

3 Answers

  1. Best Answer

    在订阅您的服务时，第二个参数是错误回调，正如@AlexisNarvaez 所说，您选择在视图中显示错误的策略是您的决定。

    myService
   .subscribe(data => {
       // Entra aquí con respuesta del servicio correcta código http 200
       console.log(data)
   }, err => {
       // Entra aquí si el servicio entrega un código http de error EJ: 404, 
       500
       console.log(err)
   })

    然后，当收到您的错误时，您可以以您喜欢的方式处理它，我通常与前面的示例类似，但是使用单个变量，我在组件中创建一个变量，例如：public messageError that is undefined at the moment

    然后在 HTML 中，您可以执行以下操作：

    <div *ngIf="messageError">{{ messageError }}</div>

    ngIf说只要存在就显示错误，如果存在则显示错误，我使用相同的变量

    因此，在订阅错误中，您执行以下操作：

    myService
   .subscribe(data => {
       // Entra aquí con respuesta del servicio correcta código http 200
       console.log(data)
   }, err => {
       // Puedes pasarle el err en caso de que mandes el mensaje desde el 
       back-end
       messageError = err
   })
    • 6

  2. 最好的方法是使用拦截器https://angular.io/api/common/http/HttpInterceptor

    拦截器的主要功能是拦截所有通过 web 发出的 http/https 请求。这样我就不必担心在每次订阅时捕获错误。

    在我的情况下，我使用存储来存储错误，并且我使用错误通知组件（Snackbar Material）订阅了该错误存储。

    我给你举一个有问题的例子

    import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { Observable, throwError } from 'rxjs';

import { CatchError } from '../../store/state/errors/errors.action';
import { ErrorState } from '../../store/state/errors/errors.state';
import { environment } from '../../../../environments/environment';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
constructor(private store: Store<ErrorState>) {}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 if (req.url.includes(environment.serverUrl)) {
  return next.handle(req).pipe(
    catchError((err: any) => {
      this.store.dispatch(new CatchError(err.error));
      return throwError(err);
    })
  );
} else {
  return next.handle(req);
  }
 }
}
    • 2

  3. 就我而言，我在发出请求时显示了请求的错误并且令牌不再处于验证状态，您可以将我的代码调整为您想要显示的错误，这将是相同的。

    TS 和 HTML。

        this.spotify.getNewReleases()
                .subscribe( (data: any) =>{
                  console.log(data);
                  this.nuevasCanciones = data;
                  this.loading = false;
                }, (errorServicio)=>{
                  console.log(errorServicio);
                  this.mensajeError = errorServicio.error.error.message;
                });

   }
    <div *ngIf="error" class="alert alert-danger animated fadeIn">
  <h3>Error</h3>
  <p>
    {{mensajeError}}
  </p>
</div>

    • 1