Обработка 400 неверных запросов от WebApi в Angular 6 (с использованием HttpClient)

Question

Ниже приведен Asp.net Core WebAPI, который возвращает неверный запрос с подробными сведениями об ошибке в качестве параметра, когда, скажем, дубликат пытается зарегистрировать пользователь.

public async Task<IActionResult> Register([FromBody] RegisterModel registerModel)
    {
        if (ModelState.IsValid)
        {
            var user = new ApplicationUser
            {
                //TODO: Use Automapper instaed 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);

Ответ обрабатывается на угловой стороне следующим образом:

user.service.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});
}

вышеуказанный метод вызывается в:

register.component.ts

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);
            });

Когда я пытался сделать Почтальон, я получаю отличный результат, как показано ниже:

PostmanResult

Но тот же результат, несмотря на попытку использования нескольких фрагментов кода, не работает, и все они записывают «Плохой результат» как ответ.

AngularResult

Я заметил, что ответ находится на вкладке сети ... просто не хватает идеи для его обработки.

ErrorDescription

Чего здесь не хватает? Ваш ответ будет высоко оценен!

Answer 1

Ответ об ошибке Dotnet Core 400 Identity представляет собой массив {код, описание}. Поэтому для обработки в машинописи сначала определите интерфейс (на самом деле не требуется, но для строгой проверки типов.

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);
      });
   }
}

Обновление: это относится к Identity Framework. (Логин и регистрация). В других областях для обработки ошибок потребуется ручная работа для выравнивания с этим шаблоном.

Answer 2

Вы получаете 400 Http-код состояния из вашего API в угловом приложении И также в почтальоне:

BTW : статус 400 - ожидаемое поведение API. Он не смог создать пользователя и отправил описание ошибки вместе с соответствующим HTTP-статусом (400). Если вы хотите обработать эту ошибку API, лучшим выбором будет что-то вроде (указано angular HttpErrorResponse type) :

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 errorPayload = JSON.parse(error.message);
                //ToDo: apply your handling logic e.g.:
                //console.log(errorPayload[0].description
                console.log(error.error);
            });