Vraag Hoek 2: waarom switchmap gebruiken bij het ophalen van route-params?


Ik ben het aan het lezen Hoekige gids over routering en navigatie.

Ze gebruiken deze code om de param van de router op te halen 'id' en het gebruiken om een ​​held te krijgen met de service service:

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

Maar ik begrijp niet goed wat het doel is van het gebruik van de switchMap operator in de bovenstaande code.

De volgende code zou niet hetzelfde zijn?

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)
    });
}

50
2018-03-07 18:00


oorsprong


antwoorden:


switchMap wordt meestal gebruikt als u enige asynchroonloopbewerking hebt die wordt geactiveerd door een vooraf geplaatste "gebeurtenis / stream".

Het verschil met b.v. flatMap of concatMap is, dat zodra de volgende trigger uitzendt, de huidige async-bewerking wordt geannuleerd en opnieuw wordt geactiveerd.

In uw geval betekent dit dat zodra de routeparameters veranderen, uw heldenervice automatisch opnieuw wordt aangeroepen met de gewijzigde params en de vorige oproep wordt geannuleerd, zodat u geen verouderde gegevens ontvangt.

Dit is vooral handig voor zoekopdrachten die langer dan 200-300 ms kunnen duren en worden geactiveerd terwijl een gebruiker typt.

De volgende code zou niet hetzelfde zijn?

Nee. Hoewel het in veel gevallen hetzelfde zou kunnen zijn, als je je het volgende scenario voorstelt:

  1. param verandert in "4"
  2. getHero(4) (een zeer traag verzoek)
  3. param verandert in "1"
  4. getHero(1) (een snel verzoek)
  5. getHero(1) voltooit -> held is "1"
  6. getHero(4) voltooit -> held is nu "4" maar de laatst gebruikte parameter was "1"

In zo'n geval switchMap zou gewoon de getHero(4)-oproep omdat het verouderd is zodra een nieuwe trigger optreedt.


83
2018-03-07 18:06