javascript - Angular 如何等待订阅

Question

我是 Angular 应用程序的新手。我不明白 subscribe 是如何工作的。我目前的障碍是我不明白为什么 console.log("B") 在 console.log("A") 之前执行，因此呈现空数组的结果(请参阅 console 输出的链接)。

我试图将所有代码放在一个函数中，用async/await 来等待函数。我不明白为什么它不起作用。

在这种情况下等待订阅的最佳方式是什么？

console.log("B") 必须在 console.log("A") 之后执行。

this._roleService.getRoleTypes(this.token).subscribe(
    response => {
        if(response.status != "error" && response.code != 400){
            let _roleTypes:Array<RoleType> = new Array<RoleType>(); 
            _roleTypes = new Array<RoleType>();
            response.data.forEach(rt => {
                let roleType:RoleType = new RoleType(
                    rt.id,
                    rt.name
                );
                _roleTypes.push(roleType);
            });
            console.log("A");
            console.log(_roleTypes);
            this.roleTypes = _roleTypes;
        }
        else{
            this._loginService.destroySession();
        }
    },error => {
        this.errorMessage = <any>error;
        if(this.errorMessage != null){
            console.log(this.errorMessage);
            alert("Petition Error");
        }
    }
);
console.log("B");
console.log(this.roleTypes);

• code
• console

Answer 1

您可以使用 firstValueFrom 方法实现此目的。这也是处理异步操作的好方法。只需删除订阅并添加此方法，然后在调用此方法的方法中添加异步关键字。

例子-

 const response = await firstValueFrom(this._roleService.getRoleTypes(this.token));

所以，现在您将首先获得 console.log("A")，然后是 console.log("B")。