如何在 Angular 中捕獲 ActionResult Api 響應？

Question

我的用戶控制器中有以下方法：

[HttpPost]
public async Task<ActionResult<bool>> Create(User user)
{
    var userCreated = userService.register(user); // returns true or false

    if (userCreated)
    {
        return Ok();
    }
    else
    {
        return BadRequest("Could not create user.");
    }
}

然后應該在我的角度調用服務中捕獲此方法：

onSubmit(user: User): void {
    this.userService.registerUser(user).subscribe((response) => {
        console.warn(response);
    });
}

注冊網址方法：

registerUser(user: User): Observable <boolean> {
    const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
    return this.http.post<boolean>(environment.userUrl, user, httpOptions);
}

不幸的是，控制台寫入 null。 我錯過了什么嗎？ 我想捕獲狀態是OK還是BadRequest 。

Answer 1

在您的控制器中，您缺少返回響應的值：

[HttpPost]
public async Task<ActionResult<bool>> Create(User user)
{
    var userCreated = userService.register(user); // returns true or false

    if (userCreated)
    {
        return Ok(userCreated); // <= HERE
    }
    else
    {
        return BadRequest("Could not create user.");
    }
}

更改以上內容后，應該就OK了。

一個小技巧是，您不需要在 Angular 中的每個請求上都添加HttpOptions 。 HttpClient正在為您執行此操作：

registerUser(user: User): Observable<boolean> {
   return this.http.post<boolean>(environment.userUrl, user);
}

PS：C# 中的Ok()表示您正在返回代碼為 200 的響應。另一方面， BadRequest()將導致 400 錯誤代碼，並將在訂閱中作為錯誤被捕獲。 在你的情況下，我認為后端的代碼應該是這樣的：

[HttpPost]
public async Task<ActionResult<bool>> Create(User user)
{
    var userCreated = userService.register(user); // returns true or false
    return Ok(userCreated);
}