如何在 Angular 中显示来自后端的异常？答案

【问题标题】：How to display exception from backend in Angular?如何在 Angular 中显示来自后端的异常？
【发布时间】：2022-01-27 07:06:58
【问题描述】：

我正在使用 Angular 在 .Net6 中准备 WebAPI。当我准备注册页面时，我将电子邮件设置为唯一的（它是用户名凭据）。现在，我想表明，当用户尝试使用已接收的电子邮件进行注册时，电子邮件并不是唯一的。 DB中的电子邮件列设置为唯一，但我不知道如何在前端处理来自后端的错误。不知何故，用户必须知道他在注册期间做错了什么。当我可以在数据库中找到提供的电子邮件时，我会抛出异常。也许我应该以另一种方式做到这一点？给点提示:) 报名方式

public void RegisterUser(UserRegister dto)
        {
            var newUser = new User()
            {
                Email = dto.Email,
                RoleId = dto.RoleId,
                FirstName = dto.FirstName,
                LastName = dto.LastName,
                DateOfBirth = dto.DateOfBirth,
                Nationality = dto.Nationality,
            
            };
            
            if(_dataContext.Users.Where(m => m.Email == newUser.Email).Any())
            { 
                throw new BadRequestException("Email exists"); 
            }

            var hashedPassword = _passwordHasher.HashPassword(newUser, dto.Password);

            newUser.PasswordHash = hashedPassword;
            _dataContext.Users.Add(newUser);
            _dataContext.SaveChanges();
        }

负责注册的组件

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Form, NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { User } from '../models/user';
import { UserService } from '../services/user.service';


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

  constructor(private http: HttpClient, 
    private userService: UserService,
    private router: Router) { }

  userRegisteredSuccessfully : boolean = false;

  public countries:any = countries
  
    ngOnInit(): void {
      this.userRegisteredSuccessfully = false

  }

  

  onSubmit(f: NgForm){
    this.userService.registerUser(f.value).subscribe(
      res =>{
        var showRegisteredSuccess = document.getElementById('register-success-alert');
        if (showRegisteredSuccess) {
          showRegisteredSuccess.style.display = "block";
        }
        setTimeout(function () {
          if (showRegisteredSuccess) {
            showRegisteredSuccess.style.display = "none";
          }
        }, 4000);
      },
      err => {
        //What do do here ? 
      }  
    );
  }

}

【问题讨论】：

标签： .net angular exception error-handling

【解决方案1】：

这是一个非常适合每个应用程序的自定义功能。这取决于：

BE 将发送什么错误。
您希望向用户公开哪些错误。（对于 FE，并非所有错误都是显式的）
是否要翻译错误消息。

我建议作为一个团队来讨论这个整体。如果它是一个宠物项目，那么您可以尝试angular snack bars 或其他可用的 toast 组件。

onSubmit(f: NgForm){
    this.userService.registerUser(f.value).subscribe(
      res =>{
        var showRegisteredSuccess = document.getElementById('register-success-alert');
        if (showRegisteredSuccess) {
          showRegisteredSuccess.style.display = "block";
        }
        setTimeout(function () {
          if (showRegisteredSuccess) {
            showRegisteredSuccess.style.display = "none";
          }
        }, 4000);
      },
      err => {
        const errMsg = ERROR_CODES[err.status] || 'ServerError';
        this._snackBar.open(errMsg , 'Ok');
      }  
    );
  }

error.constants.ts

export const ERROR_CODES = {
   "E1001": "UserExist",
   "E1002" : "BlaBla"
}

示例here

【讨论】：

感谢您的点击。当我尝试使用“err.message”时，我只收到类似：localhost:44322/api/UserRegister 的 Http 失败响应：500 OK 要自定义此消息，我应该准备一个包含一些状态和消息文本的类吗？这是个好主意吗？
虽然我需要更多信息来给出一个确切的解决方案，但我想我仍然可以给你一些线索。 1.你可以准备一个常量，比如const export ERROR_CODES = { 'E1001' : 'User Already Exist' , ... }等等。 E1001 将是自定义应用消息代码。你甚至可以翻译它。对于500 错误，您可以检查是否有任何匹配值，如果您得到undefined，那么在小吃店中简单地显示一个通用错误为Server Error。
这只是一种粗略的方法，但您也可以进一步改进它，这样就不会有人更改错误代码等等。如果它有帮助并且有效，请将其标记为答案:)

【解决方案2】：

您可以在 dotnet api 中编写自定义异常中间件，如此链接 Middleware not returning error details to API request 中所述。实施此中间件后，您可以从客户端捕获所有错误，然后将其显示给用户以供参考。

【讨论】：