在 typescript 中正确使用异步（角度）

Question

我有一个部门列表，将从 API 链接中获取。

当我的 angular 应用程序加载时（我的意思是在ngOnInit(): void调用之后），我想要：

1. 我将async获取所有部门
2. 然后我将await所有部门加载
3. 最后，我将第一个部门的 ID 保存在一个变量中

我很困惑我应该把我的等待

（注意：我的代码正在运行，API 响应来找我，我只卡在等待部分）

这是我尝试了多远：

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { DepartmentModel } from '../../user/models/individual-department.model';

@Component({
  selector: 'app-requisition-report-one',
  templateUrl: './requisition-report-one.component.html',
  styleUrls: ['./requisition-report-one.component.css']
})
export class RequisitionReportOneComponent implements OnInit {

  displayIndividualDepartmentList: DepartmentModel[] = [];

  currentDisplayDepartment: number = null;


  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.initializeDepartmentList();
  }


  initializeDepartmentList() {
    this.userService.GetAllIndividualDepartment().subscribe(
      async (data: DepartmentModel[]) => {
        this.displayIndividualDepartmentList = data;
        this.currentDisplayDepartment = await this.displayIndividualDepartmentList[0].department_id;
      }
    );
  }

  onShowButtonClick() {
    console.log(this.currentDisplayDepartment);
  }

}

我的 vscode 给了我这样的警告

'await' has no effect on the type of this expression.ts(80007)

此外，在显示按钮单击时，我得到 null 值。

在await要加载的列表之后，我想从列表displayIndividualDepartmentList中获取此变量currentDisplayDepartment中的第一个部门的 id。

TIA

Answer 1

RxJS observables不依赖于异步/等待功能，而是依赖于订阅/回调模式。 您的回调 function 将在UserService的GetAllIndividualDepartment方法返回的可观察对象发出新值时执行，因此不需要任何异步前缀。 您可以以同步方式访问数据，而无需使用 await 关键字。

 initializeDepartmentList() {
    this.userService.GetAllIndividualDepartment().subscribe(
      (data: DepartmentModel[]) => {
        this.displayIndividualDepartmentList = data;
        this.currentDisplayDepartment = this.displayIndividualDepartmentList[0].department_id;
      }
    );
  }

RxJS observables 的快速解释以及它们与您习惯使用的Promise的不同之处。

Answer 2

您可以将 Observable 转换为 promise，如下所示，并使用 async/await 语法而不是 .then() 语法。

toPromise() 方法将为您处理订阅/取消订阅，并且仅在可观察对象完成时发出。 在 HTTP observables 的情况下，它们通常只发出一个值（原始值或其他值）然后完成。

然后，您可以使用所示的 async/await 语法或 use.then()。

将 toPromise() 与 HTTP 可观察对象一起使用是一种非常引人注目且简洁的语法，使异步代码看起来同步且更易于遵循。

  async initializeDepartmentList(): Promise<void> {
    const data: DepartmentModel[] = await this.userService.GetAllIndividualDepartment().toPromise();
    this.displayIndividualDepartmentList = data;
    this.currentDisplayDepartment = this.displayIndividualDepartmentList[0].department_id;
  }

像这样打电话...

async ngOnInit(): Promise<void> {

    await this.initializeDepartmentList();
.
.
}

或者像这样使用自调用 function 。

ngOnInit()
{
(async () => {
  await this.initializeDepartmentList();
})()
}

只是补充一点，在 RxJS 7 中不推荐使用 toPromise，并将在 RxJS 8 中删除。

取而代之的是你可以使用lastValueFrom

const data = await lastValueFrom(this.userService.GetAllIndividualDepartment());

作为旁注，如果您想在启动时初始化您的应用程序，您可以使用...

app.module.ts

providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializeService,
      multi: true
    },

像这样的东西。 promise 返回无效。 该应用程序在继续之前有效地等待您的先决条件加载。

export const appInitializeService = (): () => Promise<void> => (): Promise<void> => new Promise((resolve) => resolve());