如何使用 rxjs 和 Angular 9 控制服务调用的流程？

Question

我的代码如下所示：

userContext: UserContext;
  userContext$ = this.http.get<UserContext>("assets/api/userContext.json", {}).pipe(
      shareReplay(1),
      tap((val: UserContext) => {
        this.userContext = val;
        console.log(this.userContext);
      })
  );
  userAnnouncements$ = this.http.post<Announcement>(this.userAnnouncementsService,
    {
      countryCode: this.userContext.countryCode, 
      companyGroupId: this.userContext.companyGroupId,
    }
  );

我们可以清楚地看到第二个服务 (userAnnouncements$) 需要第一个服务 (userContext$) 接收到的值，因为它们是异步的，所以我的 userContext: UserContext;执行第二个服务时为空。

我还需要 userContext.companyCode 和 GroupId 以供将来调用，因此我需要一种方法将其保存在某个地方以供后续调用。

我尝试了解析器和 APP_INT... 但后来意识到这不是两个地方的正确目的。

Answer 1

不确定这是否是您要求的，但您可以使用 switchMap

userContext: UserContext;
  userContext$ = this.http.get<UserContext>("assets/api/userContext.json", {}).pipe(
      tap((val: UserContext) => {
        this.userContext = val;
        console.log(this.userContext);
      }),
      switchMap((val: UserContext) => {
          return this.http.post<Announcement>(this.userAnnouncementsService, 
          {
              countryCode: val.countryCode,
              companyGroupId: val.companyGroupId
          });
      }
  );

那么你只有一个订阅

Answer 2

你已经在使用shareReplay，你唯一要做的就是在任何你想要的地方使用这个 Observable 的结果。

userAnnouncements$ = this.userContext$.pipe(mergeMap((userContextData) => {
    return this.http.post<Announcement>('someUrl',
        {
        countryCode: userContextData.countryCode, 
        companyGroupId: userContextData.companyGroupId,
        }
    );
}));

Answer 3

我期待你的回答。

如果你 UserContext 是它应该被调用一次的东西，正如我所提到的，你可以把它想象成一个单例。
获取一次，然后将其缓存在您的服务中。

class MyService {

    private _userContext: UserContext | undefined;

    constructor (private http: BackgroundService) { }

    userContext$ = this.http.get<UserContext>(`url`).then(ctx => {
        console.log(ctx);
        this._userContext = ctx;
        return ctx;
    });

    userAnnouncements$ = (): Promise<Announcement> => 
        this._userContext
            ? this.userAnnouncement(this._userContext)
            : this.userContext$.then(ctx => this.userAnnouncement(ctx));

    private userAnnouncement = (ctx: UserContext): Promise<Announcement> =>
        this.http.post<Announcement>(`url`, {
            countryCode: ctx.countryCode,
            companyGroupIp: ctx.companyGroupIp
        });
}

interface BackgroundService { // aka HttpClient
    get: <TResult>(url: string) => Promise<TResult>;
    post: <TResult>(url: string, body: any) => Promise<TResult>;
}

我只是模拟了HttpClient，只是为了让我正确编译它。你可以忘记它。

关键是，你的服务类有一个内部属性UserContext。对userContext$ 的任何调用都将提供此对象并在服务内缓存。
如果对userAnnouncements$ 的调用完成，则它使用缓存的UserContext。每当对userAnnouncements$ 的调用在对userContext$ 的任何调用之前完成，所以UserContext 是null 或undefined，那么，之前对userContext$ 的调用是完成该属性。

_userContext 可能是静态的，具体取决于您的依赖注入策略。如果你想让每个服务都存储自己的_userContext，很好。即使MyService 是单例的，那么_userContext 也不应该是静态的。否则，需要一个静态的_userContext 来在所有服务实例之间共享。

此外，您可以重载 userAnnouncements$ 以强制重新获取 UserContext。如果需要，那会很有趣。

希望对你有帮助。