在Promise请求中使用async/await效率是否更高？前端发请求的最优方案是什么？

Angular开发场景下优先选择返回Observable的第三种写法，基于toPromise()的前两种写法已经被官方废弃，不推荐生产环境使用。

前两种写法的缺陷 #

• toPromise()在RxJS 7.x（对应Angular 12+版本）已经被正式移除，即使是替代的firstValueFrom/lastValueFrom封装方案，灵活性也远低于直接使用Observable
• 第二种service层加async/await的写法完全冗余，相当于对Promise做了二次封装，没有任何收益还增加了不必要的异步嵌套
• 额外提醒：你给出的组件调用示例中finally块错误地将isLoading设为true，会导致加载状态永远不会消失，需要改为false

返回Observable写法的核心优势 #

• 可取消：如果请求返回前组件就被销毁，你可以通过takeUntil、异步管道等方式自动取消订阅，彻底避免内存泄漏，Promise一旦发起就无法中断
• 可组合：可以配合RxJS操作符轻松实现复杂异步逻辑，比如请求重试、多接口依赖拼接、防抖节流、返回值预处理等，比Promise处理复杂流的成本低很多
• 原生生态适配：Angular内置的| async异步管道可以直接在模板中订阅Observable，自动管理订阅生命周期，不需要手动处理订阅、取消逻辑，代码更简洁

最佳实践示例 #

Service层写法 #

// project.service.ts
getProjectById(projectId: number): Observable<Project> {
  return this.http.get<Project>(`${this.url}/search/project/${projectId}`);
}

组件层两种调用方案 #

方案1：手动订阅（适合需要额外处理业务逻辑的场景）

// project.component.ts
private destroy$ = new Subject<void>();

getProject(projectId: number) {
  this.isLoading = true;
  this.api.projects.getProjectById(projectId)
    .pipe(takeUntil(this.destroy$))
    .subscribe({
      next: (res) => this.project = res,
      error: (err) => /* 处理错误逻辑 */,
      finalize: () => this.isLoading = false
    })
}

// 组件销毁时自动终止未完成的请求
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

方案2：配合异步管道（适合纯渲染场景，代码最简洁）

// project.component.ts
project$!: Observable<Project>;

getProject(projectId: number) {
  this.project$ = this.api.projects.getProjectById(projectId);
}

模板直接绑定：

<div *ngIf="project$ | async as project; else loading">
  <!-- 渲染项目信息 -->
</div>
<ng-template #loading>加载中...</ng-template>

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