首页 > 解决方案 > 如何检查 Angular 项目中的 ASP.NET Web API 是否返回错误?

问题描述

我正在尝试使用来自 ASP.NET Web API POST 请求的注册函数来注册用户。当再次使用已经用于注册用户的电子邮件地址时,服务器会抛出错误。并且当使用新电子邮件时,用户会成功添加到数据库中。我希望能够在显示错误时显示错误通知(Material Snack bar),然后如果没有显示错误并添加用户,则重置注册表并显示成功通知。

Web API 中的注册函数如下:

        [HttpPost]
        [Route("Register")]
        public ActionResult Register(AuthVM vm)
        {
            using var db = new NorthwindContext();

            // Check if User exists
            if (this.UserExists(vm.EmailAddress))
            {
                return Forbid();
            }

            // Create new user
            var newUser = new UserLogin
            {
                EmailAddress = vm.EmailAddress,
                Password = this.ComputeSha256Hash(vm.Password),
                Name = vm.Name
            };

            // Add new user to db
            try
            {
                db.UserLogin.Add(newUser);
                db.SaveChanges();

                return Ok();
            }

            // else throw exception error
            catch (Exception e)
            {
                return BadRequest(e.Message);
            }
        }

UserExists 函数(检查输入的电子邮件是否存在于数据库中)

        public bool UserExists(string EmailAddress)
        {
            using var db = new NorthwindContext();
            var user = db.UserLogin.Where(zz => zz.EmailAddress == EmailAddress).FirstOrDefault();

            return user != null;
        }

最后,在 Angular 应用程序中订阅注册(在提交注册表单时调用)。

onSubmit() {
    if (this.service.registerForm.valid) {
      this.service.register().subscribe(
        (res: any) => {
          if(res) {
            this.openErrSnackBar();
          } else {
            this.service.registerForm.reset();
            this.openSnackBar();
            this.router.navigate(['/login']);
          }
        }
      );
    }
  }

以上大部分工作,当输入尚未使用的电子邮件地址时,执行else部分并成功注册用户,并显示成功通知并将页面重新路由到登录屏幕.

但是,当输入一个已经存在的电子邮件地址时,如果发现“res”为真,则应该执行 if 部分。在我的控制台中,当用户使用现有电子邮件注册时,我收到以下错误:

在此处输入图像描述

显示上述错误,但函数'openErrSnackBar()'没有运行?任何帮助或指导表示赞赏。

标签: c#asp.netangularasp.net-mvcasp.net-web-api

解决方案


您没有正确地从 observable 中捕获错误。尝试以下操作:

this.service.register().subscribe({
  next: (res) => {
    // Display message when the request is successful
  },
  error: (err) => {
    // Display snack bar error
  }
});

推荐阅读