Porównaj ceny domen i usług IT, sprzedawców z całego świata

Obsługa 400 złych żądań z WebApi w Angular 6 (przy użyciu HttpClient)


Poniżej znajduje się rdzeń Asp.net WebAPI, który zwraca nieprawidłowe żądanie ze szczegółami błędu dotyczącymi jego parametru, gdy, powiedzmy, zduplikowany użytkownik próbuje się zarejestrować.
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);

Odpowiedź jest obsługiwana po stronie kątowej w następujący sposób:

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

powyższa metoda jest wywoływana:

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

Kiedy próbowałem zrobić Postman, uzyskałem doskonały wynik, jak pokazano poniżej:
Wynik listonosza:

Ale ten sam wynik, pomimo wypróbowania kilku fragmentów kodu, nie działa, a całość rejestruje jako odpowiedź „Zły wynik”.
Wynik kątowy:

Zauważyłem, chociaż odpowiedź leży w zakładce Sieć ... po prostu za mało pomysłu, aby sobie z tym poradzić.
opis błędu:

Czego tu brakuje? Twoja odpowiedź byłaby bardzo wdzięczna!
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Napotkałem ten sam problem w Angular 7. Jednak rozwiązałem go dzisiaj, używając poniższego kodu:
W eksploatacji:
registerUser(userdata): Observable<any> {
return this.httpClient.post('url', userdata).pipe(catchError(this.handleError));
}handleError(error: HttpErrorResponse) {
return throwError(error);
}

W register.component.ts:
postData() {
this.auth.registerUser(userdata).subscribe( (resp) => {
console.log(resp);
},
(error) => {
console.log(error.error);
}
);
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Odpowiedź na błąd identyfikacji Dotnet Core 400 to tablica {kod, opis}.
Aby obsłużyć to w maszynie, najpierw zdefiniuj interfejs (nie jest to naprawdę wymagane, ale do ścisłego sprawdzania typu.
interface ClientError {
code: string;
description: string;
}

Następnie w części, w której obsługujesz błąd, wykonaj następujące czynności,
(error:HttpErrorResponse) => { 
if(error.status===400){
const errors: Array<ClientError> = error.error;
errors.forEach(clientError => {
console.log(clientError.code);
});
}
}

Aktualizacja: jest to specyficzne dla Identity Framework. (Logowanie i rejestracja). W innych obszarach obsługa błędów będzie wymagać ręcznej pracy w celu dostosowania do tego wzorca.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Otrzymujesz 400 kodów statusu HTTP z twojego API w aplikacji kątowej ORAZ w listonoszu, plus:
https://i.stack.imgur.com/DYAhE.png

BTW
: Status 400 jest oczekiwanym działaniem API. Nie udało się utworzyć użytkownika i wysyła opis błędu wraz z odpowiadającym mu stanem HTTP (400). Jeśli chcesz poradzić sobie z tym błędem API, na przykład

(referenced angular

HttpErrorResponse
https://angular.io/api/common/ ... ponse
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);
});

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się