javascript - navigationend - router events angular 6

Angular 2: ¿por qué usar switchMap al recuperar parámetros de ruta?

Question

Estoy leyendo la Guía angular sobre enrutamiento y navegación .

Usan este código para recuperar la ''id'' param del enrutador y usarla para obtener un héroe con el servicio:

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

Pero no entiendo bien cuál es el propósito de usar el operador switchMap en el código anterior.

¿El siguiente código no sería el mismo?

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 generalmente se usa cuando tiene alguna operación asincrónica que se activa por algún "evento / secuencia" switchMap .

La diferencia con, por ejemplo, flatMap o concatMap es que, tan pronto como se emite el siguiente disparador, la operación asíncrona actual se cancela y se vuelve a disparar.

En su caso, esto significa que tan pronto como cambien los parámetros de ruta, su servicio de héroe se volverá a llamar automáticamente con los parámetros modificados y se cancelará la llamada anterior para que no reciba datos obsoletos.

Esto es especialmente útil para consultas de búsqueda que pueden demorar más de 200-300 ms y se activan mientras un usuario escribe.

¿El siguiente código no sería el mismo?

No. Si bien puede comportarse igual en muchos casos, si imagina el siguiente escenario:

1. el parámetro cambia a "4"
2. getHero(4) (una solicitud muy lenta)
3. el parámetro cambia a "1"
4. getHero(1) (una solicitud rápida)
5. getHero(1) completa -> el héroe es "1"
6. getHero(4) completa -> héroe ahora es "4" pero el último parámetro utilizado fue "1"

En tal caso, switchMap simplemente descartaría la getHero(4) ya que está desactualizada tan pronto como ocurra un nuevo disparador.