switchMap()如何解析Promise?

时间:2017-06-27 15:47:38

标签: javascript angular promise rxjs observable

我正在阅读Angular 2教程和我关于路由器的部分,特别是关于使用Observable从URL中提取参数的部分。它使用了Observables。

部分代码是:

ngOnInit(): void {
        this.route.params
            .switchMap((params: Params) => this.heroService.getHero(+params['id']))
            .subscribe(hero => this.hero = hero);
    }

getHero()方法:

getHero(id: number): Promise<Hero> {
        return this.getHeroes()
            .then(heroes => heroes.find(hero => hero.id === id));
    }

正如您所看到的,getHero()是强类型的,可以返回Hero类型的Promise。它返回then()调用的结果,据我所知,这是一个承诺。

所以switchMap()收到了承诺。正如我理解switchMap()的功能一样,它会接受它给出的任何内容并从中创建一个新的Observable。 subscribe()然后获取Observable持有的值并将其分配给this.hero

以下是我无法获得的内容:hero实例变量的类型强大,可以保存Hero个对象。由于switchMap()getHero()的返回值中创建了一个Observable,而getHero()返回了一个Promise,因此我认为subscribe()正在分配一个Promise<Hero>this.hero。我不明白Promise如何得到解决,其实际值被提取并放入hero实例var。

感谢任何能够对此有所了解的人!!

1 个答案:

答案 0 :(得分:10)

这是RxJS 5中没有很好记录的功能之一。期望从某些回调接收Observable的所有运算符实际上都与Observables,Promises,iterators,arrays,... ...

看看这些:

  1. http://reactivex.io/rxjs/class/es6/MiscJSDoc.js~ObservableInputDoc.html
  2. http://reactivex.io/rxjs/class/es6/MiscJSDoc.js~SubscribableOrPromiseDoc.html
  3. 所以会发生switchMap()订阅从Promise返回的getHero(...),就像它是一个Observable一样。

    源代码的核心部分在这里:

    这一原则的一个非常常见的用法是将一系列物品拆包成单独的排放物。例如:

    Observable.of([1,2,3,4])
      .concatAll()
      .subscribe(console.log);
    

    这将打印:

    1
    2
    3
    4
    

    查看现场演示:https://jsbin.com/sevale/4/edit?js,console

    即使按照手册concatAll()正式使用Observables发射Observables,它也能正常工作。