Angular 2: зачем использовать switchMap при получении параметров маршрута?

Я читаю Angular Руководство по маршрутизации и навигации.

Они используют этот код для получения router 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)
    });
}

Ответы

Ответ 1

switchMap обычно используется, когда у вас есть какая-либо операция async, которая инициируется некоторым добавленным "событием/потоком".

Разница, например, flatMap или concatMap заключается в том, что сразу после запуска следующего триггера текущая операция асинхронизации отменяется и перезапускается.

В вашем случае это означает, что как только изменяются параметры маршрута, ваш героя-сервис автоматически вызывается снова с измененными параметрами, а вызов previouse отменяется, поэтому вы не будете получать устаревшие данные.

Это особенно полезно для поисковых запросов, которые могут занять больше 200-300 мс и запускаться во время ввода пользователем.

Следующий код не будет таким же?

Нет. Хотя во многих случаях это может вести себя одинаково, если вы представляете себе следующий сценарий:

  • param изменяется на "4"
  • getHero(4) (очень медленный запрос)
  • param изменяется на "1"
  • getHero(1) (быстрый запрос)
  • getHero(1) завершает → герой "1"
  • getHero(4) завершает → теперь герой "4", но последний использованный параметр был "1"

В таком случае switchMap просто отменит getHero(4) -call, поскольку он устарел, как только произойдет новый триггер.