以下は、たとえば重複したユーザーが登録しようとしている場合に、そのパラメータに関するエラーの詳細を含む不正なリクエストを返す Asp.net Core 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);
応答は Angular 側で次のように処理されます。
ユーザー.サービス.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});
}
上記のメソッドは次の場所で呼び出されます:
レジスタコンポーネント.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);
});
Postman を実行してみると、以下のように完璧な結果が得られました。
郵便配達員の結果:
しかし、複数のコード スニペットを試しても同じ結果は得られず、応答として「Bad result」がログに記録されます。
角度の結果:
ただし、応答がネットワーク タブにあることに気付きました。ただ、それを処理するためのアイデアが不足しています。
エラーの説明:
何が足りないのでしょうか? ご返答いただければ幸いです。
ベストアンサー1
私も Angular 7 で同じ問題に直面していました。しかし、今日は以下のコードを使用してこれを修正しました。
サービス中:
registerUser(userdata): Observable<any> {
return this.httpClient.post('url', userdata).pipe(catchError(this.handleError));
}
handleError(error: HttpErrorResponse) {
return throwError(error);
}
register.component.ts の場合:
postData() {
this.auth.registerUser(userdata).subscribe(
(resp) => {
console.log(resp);
},
(error) => {
console.log(error.error);
}
);
}