Angular 2：为什么在检索路由参数时使用switchMap？

Question

我正在阅读Angular Guide about Routing & Navigation。

他们使用此代码检索路由器的PARAM 'id'并用它来得到一个英雄与service服务：

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

但我不能很好地理解什么是在使用switchMap运营商的目的以上代码。

以下代码将不会相同？

ngOnInit() { 
    this.route.params 
    // NOTE: I do not use switchMap here, but subscribe directly 
    .subscribe((params: Params) => { 
     this.service.getHero(+params['id']).then(hero => this.hero = hero) 
    }); 
} 

Answer 1

switchMap通常是用来当你有一个由一些预谋“事件/流”引发一些异步操作。

与例如flatMap或concatMap是，只要下一个触发器发出，当前的异步操作就会被取消并重新触发。

在你的情况下，这意味着只要route-params改变，你的英雄服务会自动再次被改变的参数调用，并且前面的呼叫被取消，所以你不会收到过时的数据。

这对搜索查询特别有用，搜索查询可能需要更长的时间，然后在200-300ms之间，并在用户输入时触发。

以下代码将不会相同？

号虽然它可能表现在很多情况下是相同的，如果你想象以下场景：

1. PARAM更改为 “4”
2. getHero(4)（一个非常缓慢的要求）
3. PARAM变化为 “1”
4. getHero(1)（快速请求）
5. getHero(1)完成 - >英雄是 “1”
个
6. getHero(4)完成 - >英雄，现在是“4”，但最近使用PARAM是“1”

在这种情况下switchMap只会丢弃getHero(4) -call，因为它一旦过时作为新的触发发生。