angular - 使用 async await 延迟 block 的执行

Question

在我的 Angular 组件中，我创建了一个异步方法，该方法需要在数据服务中的方法返回一些数据后执行某些操作。我正在尝试使用异步等待，但我认为我对这个概念没有很好的理解。这是我尝试编写的组件中的方法:

async redrawGrid(params: any) {
        let v;
        try {
            v = await this.innerGridService.loadAccountList()
        } catch (error) {
            // return error
        }
        // I need to execute this code after loadAccountList() returns data
        params.node.childFlower.setRowHeight( (this.globalRowCount * 46 ) + 48);
        this.gridOptions.api.onRowHeightChanged();
}

我的服务 loadAccountList() 中的方法返回并可观察到:

...
@Injectable()
export class ClientListService { 
...
responseObject$: Observable<ResponseObject>;
...

}
loadAccountList() {
        this.logService.info('InnerGridService loadAccountList()');

        if (this.dataStore.responseObject) {
            this.refreshDataStore();
        }
        let token = this.authenticationService.getToken();
        let headers = new Headers({ 'netx.esf.AuthenticationService': token });
        let options = new RequestOptions({ headers: headers });

        this.http.get(`${this.baseUrl}`, options)
.map((response: Response) => response.json())
            .subscribe(
            (data: InnerGridResponse) => {
                this.formatData(data.response.accountlist);
                this.dataStore.InnerGridResponse = data;
                this.dataStore.responseObject = data.response;
                this._InnerGridResponse.next(Object.assign({}, this.dataStore).InnerGridResponse);
                this._responseObject.next(Object.assign({}, this.dataStore).responseObject);
                if (data.errorCode === 0 || data.errorCode === 90) { // success
                    this.logService.info('loadAccountList() success: ', data.errorCode);
                    this.clearError();
                } else { // error code from backend
                    this.logService.error('loadAccountList() errorCode: ', data.errorCode);
                    this.setError(this.message[0], data.errorCode);
                }
            },
            error => { // exception
                this.logService.error('loadAccountList() exception:', error);
                this.setError(this.message[0], error._body);
                // throw error;
            });

        return this.responseObject$;
}

Answer 1

请原谅我这么说，但这段代码需要大量修改。

您正在实现经典的反模式，即从一个流中获取数据并将其放入另一个流中。这就像将水从软管中倒入桶中，然后试图将桶中的水倒入另一根软管中。相反，只需连接软管，或者更好的是，将您已有的软管交给某人。

简单来说，服务通常不应该订阅和尝试对可观察对象做任何事情。它应该只返回它，通常在映射之后。订阅应该在消费者(组件)中完成，可以是在 TS 逻辑中，也可以是使用 async 管道的模板。

我不会尝试重写您的服务，因为那里发生了太多我不明白的事情。基本骨架应该是:

locaAccountList(): Proimse<AccountList> {
  return this.http.get(URL)
    .map(response => response.json())
    .toPromise()
    .then(json => makeAccountListFromJson(json));
}

我使用 toPromise 重写了它以返回一个 promise 而不是一个 observable。这经常在 this.http 中看到，它通常返回一个只有一次发射的可观察对象。这样，您就可以等待 结果。您不能 await 一个可观察对象发出。 await 用于 promise 。尝试 await 一个可观察对象只会完成 await 42。

一旦你重写了你的服务，你的组件就可以说:

async redrawGrid(params: any) {
  await this.innerGridService.loadAccountList();

  // I need to execute this code after loadAccountList() returns data
  params.node.childFlower.setRowHeight( (this.globalRowCount * 46 ) + 48);
  this.gridOptions.api.onRowHeightChanged();
}

您(可能)不需要 try，因为异步函数中的错误无论如何都会从底部流出并从该函数返回一个被拒绝的 promise 。顺便说一下，我不清楚您是如何使用调用 loadAccountList() 的结果的。