Angular HttpGet请求.NET Core IActionResult返回Undefined问题求助

问题根因 #

• Angular Service中getAccessToken的then回调没有返回Http请求的Promise结果，导致Observable最终发射的值为undefined
• 后端接口直接开启新线程执行业务逻辑后立即返回，此时后端业务流程还未执行完成，不符合"后端处理完成后再关闭Spinner"的需求

修复步骤 #

1. 修复Angular Service代码

补全then回调的return语句即可解决返回值为undefined的问题，也可改用更符合RxJS习惯的写法：

// 最小改动版本
finishCycle(): Observable<any> {
  return from(
    this.authService.getAccessToken()
    .then(token => {
      const headers = new HttpHeaders().set("Authorization", `Bearer ${token}`);
      // 此处补全return，把Http请求的Promise结果向外传递
      return this.http.get(this.createCompleteRoute("api/Cycle/FinishCycle", this.envUrl.urlAddress),
        { headers: headers, withCredentials: true }).toPromise();
    }));
}

// 更推荐的RxJS原生写法，不需要转Promise，性能更优
finishCycle(): Observable<any> {
  return from(this.authService.getAccessToken()).pipe(
    switchMap(token => {
      const headers = new HttpHeaders().set("Authorization", `Bearer ${token}`);
      return this.http.get(this.createCompleteRoute("api/Cycle/FinishCycle", this.envUrl.urlAddress),
        { headers: headers, withCredentials: true });
    })
  )
}

2. 修复后端C# Controller代码

去掉额外开启的线程，确保业务逻辑执行完成后再返回响应，匹配Spinner的展示逻辑：

[HttpGet("/api/Cycle/FinishCycle")]
public async Task<IActionResult> FinishCycle()
{
    // 去掉自定义的新线程，直接执行业务逻辑
    await Task.Run(() => this._waterCycleService.FinishCycle());
    // 如果FinishCycle本身是异步方法，直接写 await this._waterCycleService.FinishCycle(); 即可
    return this.Ok(new { Message = "Finished" });
}

3. 前端获取返回字段

修复后订阅回调中可以直接读取返回的Message字段：

finishCycle() {
  this.spinner.show();
  this.service.finishCycle().subscribe(res => {
    console.log(res.Message); // 可正常输出 "Finished"
    this.disableStart = false;
    this.spinner.hide();
  });
}

内容的提问来源于stack exchange，提问作者nbren007