반응형
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보다 오래 걸리고 사용자가 입력하는 동안 트리거되는 검색 쿼리에 특히 유용합니다.
다음 코드는 동일하지 않습니까?
아니요. 다음과 같은 시나리오를 상상하면 많은 경우 동일하게 작동 할 수 있습니다.
- 매개 변수가 "4"로 변경됨
getHero(4)
(매우 느린 요청)- 매개 변수가 "1"로 변경됨
getHero(1)
(빠른 요청)getHero(1)
완료-> 영웅은 "1"입니다.getHero(4)
완료-> hero는 이제 "4"이지만 마지막으로 사용 된 매개 변수는 "1"입니다.
이러한 경우 새 트리거가 발생하자마자 구식이므로 -call을 switchMap
버립니다 getHero(4)
.
반응형
'UFO ET IT' 카테고리의 다른 글
C # 6 (Roslyn CTP6)에서 문자열 보간을위한 로캘 지정 (0) | 2020.12.25 |
---|---|
Android 테스트 : UIAutomator 대 Espresso (0) | 2020.12.25 |
Java에서 호출되는 오버로드 된 메서드 (0) | 2020.12.25 |
클래스 파일 이름의 $ 1은 무엇입니까? (0) | 2020.12.25 |
getLocationOnScreen / getLocationInWindow의 잘못된 좌표 (0) | 2020.12.25 |