RxJS5

Question

我需要调用两个http服务和一个socket。第一个 http 调用是获取元数据并在本地设置其值之一。然后，我需要调用第二个 http 服务，该服务 returns 初始值随后通过套接字更新。

这是我目前拥有的：

export class MyComponent implements OnInit {
    subscription: Subscription;
    title: string;
    prop1: number;
    prop2: number;

    constructor(private http: HttpService,
                private socket: SocketService,
                private route: ActivatedRoute) {
    }

ngOnInit() {
    this.prop1 = this.route.snapshot.parent.params['prop1'];
    this.subscription = this.http.get('/metaData')
        .do(data => {
            this.title = data.title;
            this.prop2 = data.prop2;
        })
        //this.prop2 is undefined in combineLatest...
        .combineLatest(
            this.http.get('initialData', { prop1: this.prop1, prop2: this.prop2 }),
            this.socket.get('updateEvents', { prop1: this.prop1, prop2: this.prop2 }),
            this.updateList)
        .subscribe(data => {
            this.data = data
        })

}

我相信我很接近，但 combineLatest 运算符似乎没有访问本地变量，因为 prop2 是 undefined。这是因为我在 do 运算符中执行 side effect 时 combineLatest 没有按时看到 prop2 吗？

注意：如果我使用 switchMap，prop2 会像这样工作：

.switchMap(data => this.http.get('initialData', { prop1: this.prop1, prop2: this.prop2 }))

为什么使用 combineLatest 时 prop2 undefined？

Answer 1

这是因为传递给 combineLatest 的参数在调用 combineLatest 之前被评估 - 因此，在 do 收到下一个通知等之前

可以用defer解决问题：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/defer';

// ...

.combineLatest(
    Observable.defer(() => this.http.get('initialData', { prop1: this.prop1, prop2: this.prop2 })),
    Observable.defer(() => this.socket.get('updateEvents', { prop1: this.prop1, prop2: this.prop2 })),
    this.updateList
)

// ...

RxJS5 - combineLatest 未访问 Angular 的本地属性

RxJS5 - combineLatest not accessing Angular's local properties

angular