在Angular 6中处理来自WebApi的400个错误请求（使用HttpClient）

下面是一个Asp.net核心WebAPI，当一个用户试图注册时，它返回错误请求，并提供有关其参数的错误详细信息

public async Task<IActionResult> Register([FromBody] RegisterModel registerModel)
    {
        if (ModelState.IsValid)
        {
            var user = new ApplicationUser
            {
                //TODO: Use Automapper instead of manual binding  

                UserName = registerModel.Username,
                FirstName = registerModel.FirstName,
                LastName = registerModel.LastName,
                Email = registerModel.Email
            };
            var identityResult = await this.userManager.CreateAsync(user, registerModel.Password);
            if (identityResult.Succeeded)
            {
                await signInManager.SignInAsync(user, isPersistent: false);
                return Ok(GetToken(user));
            }
            else
            {
                Console.WriteLine("Errors are : "+ identityResult.Errors);
                return BadRequest(identityResult.Errors);
            }
        }
        return BadRequest(ModelState);

在中调用上述方法：

register.component.ts

register(user: User) {
   // let headers = new Headers({ 'Content-Type': 'application/json' });
   //var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json'});
   const reqHeader = new HttpHeaders().set('Content-Type', 'application/json')
                            .set('Accept', 'application/json');
//return this.http.post(this.rootUrl + '/api/account/register', body,{headers : reqHeader});

    return this.http.post(this.apiUrl+ '/api/account/register', user,{headers : reqHeader});
}

this.userService.register(this.registerForm.value)
        .pipe(map((res: Response) => res.json()))
        .subscribe(
            data => {
                this.alertService.success('Registration successful', true);
                this.router.navigate(['/login']);
            },
            (error:HttpErrorResponse) => {
                // let validationErrorDictionary = JSON.parse(error.text());
                // for (var fieldName in validationErrorDictionary) {
                //     if (validationErrorDictionary.hasOwnProperty(fieldName)) {
                //         this.errors.push(validationErrorDictionary[fieldName]);
                //     }
                // }
                // this.alertService.errorMsg(this.errors);
                console.log(error.error);
            });

当我尝试做邮递员时，我得到了如下完美结果：

邮递员结果：

但是，尽管尝试了多个代码段，但同样的结果仍然不起作用，并且它将“坏结果”记录为响应

角度结果：

我确实注意到，尽管响应位于“网络”选项卡中。。只是缺少处理它的想法

错误说明：

---

这里缺少什么？非常感谢您的回复

在angular应用程序和postman中，您将从API中获得400个Http状态代码：

顺便说一句：400状态是API预期的行为。它无法创建用户并发送错误描述以及相应的HTTP状态（400）。如果要处理此API错误，最好的选择是（参考类型）：

---

Dotnet Core 400标识错误响应是一个{code，description}数组。 因此，要在typescript中处理它，首先定义一个接口（实际上不是必需的，但用于严格的类型检查）

interface ClientError {
    code: string;
    description: string;
}

然后在处理错误的部分，执行以下操作：

(error:HttpErrorResponse) => { 
   if(error.status===400){            
      const errors: Array<ClientError> = error.error;
      errors.forEach(clientError => {
         console.log(clientError.code);
      });
   }
}

（错误：HttpErrorResponse）=>{
如果（error.status==400）{
常量错误：数组=error.error；
错误。forEach（clientError=>{
console.log（clientError.code）；
});
}
}

---

更新：这是针对Identity Framework的。（登录和注册）。在其他领域，错误处理需要手动操作才能与此模式保持一致。

在angular 7中，我也遇到了同样的问题。不过，我今天使用以下代码修复了此问题：

在职：

registerUser(userdata): Observable<any> {
    return this.httpClient.post('url', userdata).pipe(catchError(this.handleError));
}

handleError(error: HttpErrorResponse) {
    return throwError(error);
}

我也犯了同样的错误

消息：“的Http失败响应”https://localhost:44397/api/AddEmployee: 400“好的” 名称：“HttpErrorResponse” 好：错 现状：400 状态文本：“确定” url:“https://localhost:44397/api/AddEmployee"

只是因为我忘了加

formData:Employee=新员工（）

现在，它将与我的.net核心webapi一起正常运行

---

你在postman result中得到的HTTP状态码是什么？400个错误结果。我的应用程序中也有同样的问题，但仍然没有答案…你得到解决方案了吗？你也得到了答案。对状态码没有疑问，我对它在postman上呈现的错误描述感兴趣。问题是，以错误的名义，我只看到一个文本“错误结果”在客户端。没有更多！客户端不能有一个代理来拦截错误响应吗？@Jason let errorPayload=JSON.parse（error.message）这在调试器中的值是什么？以及（error:HttpErrorResponse）=>…参数对象的状态是什么？请提供此对象的转储objects@n.piskunoverrorPayload=JSON.parse（error.message）结果是“未定义”。和（errr:httperrrrresponse…）的情况一样。在中提到了更多的屏幕截图。但是我注意到了Http的预期结果，而不是HttpClient（为什么如此？）。将很快发布更多详细信息。

registerUser(userdata): Observable<any> {
    return this.httpClient.post('url', userdata).pipe(catchError(this.handleError));
}

handleError(error: HttpErrorResponse) {
    return throwError(error);
}

postData() {
    this.auth.registerUser(userdata).subscribe(
        (resp) => {
            console.log(resp);
        },
        (error) => {
            console.log(error.error);
        }
    );
}