Angular 服务教程：可以在获取英雄之前添加消息吗？答案

【问题标题】：Angular Service Tutorial: Can Message Be Added Before Heroes Are Fetched?Angular 服务教程：可以在获取英雄之前添加消息吗？
【发布时间】：2019-11-25 13:45:43
【问题描述】：

我对 Angular 服务教程代码有一些疑问：

以下代码中的 TODO 注释是什么意思？
如果我们在此处添加消息，是否有可能在获取 HEROES 之前添加消息，因为 Observable 是异步的，我们无法控制它？
在接收Observable的调用者的subscribe函数中添加消息会更好吗？

getHeroes(): Observable<Hero[]> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }

我希望只有在实际获取 HEROES 后才会添加“HEROES is fetched”消息。

【问题讨论】：

是的，如果您将其添加到调用者的订阅中会更好

标签： angular typescript angular-observable

【解决方案1】：

您有一些选项，具体取决于您想要什么...一种是将其放入订阅中，但这可能会导致代码重复，因为您订阅 getHeroes() 的任何地方都需要记住添加 messageService如果您真的希望每次调用 getHeroes() 时都发生这种情况，那么从代码维护的角度来看，这并不理想...相反，您可以这样做：

getHeroes(): Observable<Hero[]> {
  return of(HEROES).pipe(tap(() => this.messageService.add('HeroService: fetched heroes')));
}

现在使用点击操作符，您已经将此 messageService 操作作为流的一部分，但在成功获取英雄之后。或者，这个设置也可以工作：

getHeroes(): Observable<Hero[]> {
  return defer(() => {  
    this.messageService.add('HeroService: fetching heroes');
    return of(HEROES);
  });
}

此设置将 messageService 操作放在实际获取英雄之前，但将操作放入带有 defer 的流中可确保在实际触发订阅而不是构建流时才会发生该操作。

【讨论】：

我们可以不使用pipe而使用这段代码吗，因为pipe用于组合多个功能，而这里只有一个功能？ typescript getHeroes(): Observable<Hero[]> { return of(HEROES).pipe(tap(() => this.messageService.add('HeroService: fetched heroes'))); }
管道用于构建一系列动作。你正在建立一个行动链。第一个“获取”英雄，第二个添加消息，这是两个不同的操作。