angular - 如何在 Angular2 中进行嵌套的 Observable 调用

Question

我在进行嵌套的 Observable 调用时遇到了一些麻烦。我的意思是调用检索用户的 http 服务，然后从用户那里获取 id 以进行另一个 http 调用，最后在屏幕上呈现结果。

1) HTTP GET 1 : 获取用户

2) HTTP GET 2:通过唯一标识符作为参数获取用户的偏好

这在组件 Blah.ts 中转换为以下代码:

版本 1 - 此代码不显示任何内容

 ngOnInit() {
        this.userService.getUser()
            .flatMap(u => {
                this.user = u; // save the user
                return Observable.of(u); // pass on the Observable
            })
            .flatMap(u => this.userService.getPreferences(this.user.username)) // get the preferences for this user
            .map(p => {
                this.preferences = p; // save the preferences
            });
    }

版本 2 - 此代码有效但对我来说似乎是错误的方法:

 this.userService.getUser().subscribe(u => {
            this.user = u;
            this.userService.getPreferences(this.user.username).subscribe(prefs => {
                this.preferences = prefs;
            });
        });

这是模板:

<h3>User</h3>

<div class="row col-md-12">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">User details</h3>
            </div>
            <div class="panel-body">
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Full Name</th>
                            <th>Enabled</th>                                
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{user?.username}}</td>
                            <td>{{user?.fullName}}</td>
                            <td>{{user?.enabled}}</td>                          
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- end of col 1-->

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">User preferences</h3>
            </div>
            <div class="panel-body">
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>Language</th>
                            <th>Locale</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{preferences?.preferences?.get('language')}}</td>
                            <td>{{preferences?.preferences?.get('locale')}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- end of col 2-->

</div>
<!-- end of row 1-->

我认为显示该服务没有任何意义，它只是使 http get() 调用如下:

  http.get('http://blablah/users/')
        .map((response) => response.json())

请建议定义 Observables 链的最佳工作方法。

Answer 1

您应该稍微阅读一下 rxjs 的运算符。您的示例非常冗长，并且以不应该使用的方式使用 flatMap 和 map 。此外，您的第一个示例也无法正常工作，因为您没有订阅 Observable。

这会做你需要的:

ngOnInit() {
    this.userService.getUser().pipe(
        tap(u => this.user = u),
        flatMap(u => this.userService.getPreferences(u.username))
      ).subscribe(p => this.preferences = p);
}

遗产:

在版本 5.5 之前，rxjs 专门使用基于原型(prototype)的运算符。此代码在功能上等同于上述代码:

ngOnInit() {
    this.userService.getUser()
        .do(u => this.user = u) //.do just invokes the function. does not manipulate the stream, return value is ignored.
        .flatMap(u => this.userService.getPreferences(u.username))
        .subscribe(p => this.preferences = p);
}