Diaľkové automatické dopĺňanie uhlového materiálu 2. Ako zrušiť žiadosti? - uhlové, rxjs, uhlové materiály

Používam automatické dopĺňanie uhlového materiálu na vypísanie výsledkov na základe vyhľadávania do vzdialeného rozhrania API (filtrovanie sa vykonáva na vzdialenej strane).

Strana HTML:

<mat-form-field class="full-width">
<input type="text" placeholder="Brand" aria-label="Number"
matInput [formControl]="formControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let brand of brands | async" [value]="brand.name">
{{ brand.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>

Strana TS:

this.brands = this.formControl.valueChanges.flatMap(
q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);

V tomto okamihu to funguje dobre. Zoznam značiek dostávam z diaľky a zo zoznamu automatického dopĺňania môžem vybrať hodnotu. Teraz je otázkou .... ako môžem zrušiť všetky žiadosti zakaždým, keď sa zmení vstupný text?

Existuje veľa príkladov so vzdialenými požiadavkami, ale cieľom nie je získať všetky vzdialené výsledky pri spustení. Cieľom je získať vzdialené výsledky zakaždým, keď používateľ zmení vkladanie textu.

odpovede:

Práve som sa zmenil flatMap s switchMap a pracoval ako kúzlo:

this.brands = this.formControl.valueChanges.switchMap(
q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);

Ako hovorí Benedikt v komentári, ak XHR zrušítePočas zadávania požiadavky sa žiadosti stále vykonávajú na serveri a - v mierke - môžu spôsobiť veľmi vysoké zaťaženie. Dobrou praxou je vydať XHR, napríklad 500 milisekúnd po tom, čo používateľ prestal písať. Tým sa už zníži počet žiadostí.

this.brands = this.formControl.valueChanges.debounceTime(500).switchMap(
q => this._apiService.getVehiclesBrands(q).map(x => x.results)
);