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!
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
3 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
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
Potwierdzenie od:
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
Potwierdzenie od:
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
) :