Question

我使用的是Angular CLI 1.5.4 / Angular 5.0.4（起始代码由Angular CLI生成）。应用程序的状态高度依赖于当前用户的元数据，并且在服务类中执行我的大部分HTTP请求要求我传递URL变量，例如/api/company/{companyId}/some-resource/1或/api/users/{userId}/ui-settings/some-ui-option 。

我的方法：登录后使用PrincipalService存储用户的对象，我可以在应用中的任何位置（PrincipalService.getUser() : Promise<UserIdentity>）请求它。

用户以Promise的形式返回，因为我实际上可能需要发送Http请求来加载用户数据。使用用户ID的示例服务：

@Injectable()
export class UserUiSettingsService {

  constructor(private http: HttpClient,
              private principal: PrincipalService) { }

  private urlUserGroupingTableUISettings(): Promise<string> {
    return new Promise<string>((resolve, reject) => {
      this.principal.getUser().then(
        user=> resolve(`${environment.httpBaseUrl}users/${user.id}/ui-settings/document-path-grouping`),
        error=>reject(error)
      );
    });
  }

  getUsersGroupingTableUISettings() : Promise<DocumentPathTableUISettings> {
    return new Promise<DocumentPathTableUISettings>((resolve, reject) => {
      this.urlUserGroupingTableUISettings().then(
        url=> this.http.get<DocumentPathTableUISettings>(url).toPromise().then(
          data=>resolve(data),
          error=>reject(error)
        ),
        error=>reject(error)
      );
    });
  }
  ...
}

因此，为了实际调用getUsersGroupingTableUISettings()中的http方法，我需要创建一个新的Promise并首先解析User对象然后我可以启动请求。

我的问题是嵌套，我是否真的需要嵌套这些请求并以如此丑陋的方式等待每次成功？我能否以更方便的方式做到这一点（想象一下我的方法如果我之前需要加载3-4种不同的东西，而不仅仅是用户，但可能还有一些公司数据）？

Answer 1

您可以使用三种方法：

使用await关键字。
使用承诺链。
Observable.mergeMap和.map运营商

前两个的代码示例：

1

private async urlUserGroupingTableUISettings(): Promise<string> {        
  const user = await this.principal.getUser();
  return `${environment.httpBaseUrl}users/${user.id}/ui-settings/document-path-grouping`;
}

getUsersGroupingTableUISettings() : Promise<DocumentPathTableUISettings> {    
  const url = await this.urlUserGroupingTableUISettings()
  return await this.http.get<DocumentPathTableUISettings>(url).toPromise();
}

2

private urlUserGroupingTableUISettings(): Promise<string> {        
  return this.principal.getUser().then(
    user=>`${environment.httpBaseUrl}users/${user.id}/ui-settings/document-path-grouping`
  );
}

getUsersGroupingTableUISettings() : Promise<DocumentPathTableUISettings> {    
  return this.urlUserGroupingTableUISettings()
      .then(
          url=>this.http.get<DocumentPathTableUISettings>(url).toPromise()
      );
}

3

使用observable，最简单的是：

getUsersGroupingTableUISettings() : Observable<DocumentPathTableUISettings> {
   return this.principalService.getUserObservable().flatMap(
        user=>this.http.get<DocumentPathTableUISettings>(`${environment.httpBaseUrl}users/${user.id}/ui-settings/document-path-grouping`)
    );
}

在Angular 5 Services中处理url变量的最简单方法

1 个答案: