angular 4 and rxjs - 각도 4 및 rxjs - 취소 된 요청이 서버에 도달하지 못하도록 방지

아시다시피 switchMap은 이전에 구독 한 옵저버 블을 종료시킵니다.

위의 의견에서 Fan Cheung은 페치를 사용하고 있습니다. 가져 오기는 취소를 지원하지 않습니다.

Angulars HttpClient는 http 요청 취소를 지원하므로 운이 좋았습니다.

호버 이벤트를받는 방법에 따라 다르게 처리 할 수 ​​있습니다. 하지만 주제를 사용하여 버전을 보여줄 수 있습니다

(미확인 코드)

@Component({
    template: `
        <table>
            <tr
                *ngFor="let item of items"
                // on hover we pass the current item to the mouseOver handler
                (mouseover)="mouseOver(item)"
            >
                <td>{{item}}</td>
            </tr>
        </table>
        // if there is a hovered item we show it
        <div *ngIf="hovered$ | async; let hoverItem">
            {{hoverItem}}
        </div>
    `
})
export class TableComponent extends Component {
    items = ['one', 'two', 'three'];
    // a stream of hovered items
    hoverSubject = new Subject();
    // a stream of requested hover items
    // that have been debounced
    hoverItem$: Observable<string>;
    constructor() {
        this.hoverItem$ = this.hoverSubject.pipe(
            // only let items pass every 200ms
            debounceTime(200),
            // only pass items that are different from the previous ones
            distinctUntilChanged,
            // do the request
            switchMap(item => this.http.get(`https://something`)),
        );
    }
    // emit new hovered items into the hoverSubject
    mouseOver(item: string) {
        this.hoverSubject.emit(item);
    }
}