UFO ET IT

Angular 2 : 경로 매개 변수를 검색 할 때 switchMap을 사용하는 이유는 무엇입니까?

ufoet 2020. 12. 25. 00:16
반응형

Angular 2 : 경로 매개 변수를 검색 할 때 switchMap을 사용하는 이유는 무엇입니까?


Routing & Navigation에 대한 Angular Guide를 읽고 있습니다.

이 코드를 사용하여 라우터의 매개 변수를 검색하고 '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)
    });
}

switchMap 일반적으로 앞에 추가 된 "이벤트 / 스트림"에 의해 트리거되는 비동기 작업이있을 때 사용됩니다.

예에 차이 flatMap또는 concatMap바로 다음 트리거를 방출로, 현재 비동기 작업이 취소되고 재 트리거 있다는 것입니다.

귀하의 경우 이것은 route-params가 변경 되 자마자 hero-service가 변경된 매개 변수로 자동으로 다시 호출되고 이전 호출이 취소되므로 오래된 데이터를받지 않습니다.

이는 200-300ms보다 오래 걸리고 사용자가 입력하는 동안 트리거되는 검색 쿼리에 특히 유용합니다.

다음 코드는 동일하지 않습니까?

아니요. 다음과 같은 시나리오를 상상하면 많은 경우 동일하게 작동 할 수 있습니다.

  1. 매개 변수가 "4"로 변경됨
  2. getHero(4) (매우 느린 요청)
  3. 매개 변수가 "1"로 변경됨
  4. getHero(1) (빠른 요청)
  5. getHero(1) 완료-> 영웅은 "1"입니다.
  6. getHero(4) 완료-> hero는 이제 "4"이지만 마지막으로 사용 된 매개 변수는 "1"입니다.

이러한 경우 새 트리거가 발생하자마자 구식이므로 -call을 switchMap버립니다 getHero(4).

참조 URL : https://stackoverflow.com/questions/42655134/angular-2-why-use-switchmap-when-retrieving-route-params

반응형