javascript / intermediate
Snippet
Suche optimieren mit RxJS switchMap
Die Verwendung von switchMap für die Suche stellt sicher, dass eine alte Anfrage abgebrochen wird, falls ein neuer Suchbegriff eingegeben wird, bevor die vorherige Anfrage abgeschlossen ist. Dies verhindert Race Conditions.
snippet.js
1
2
3
4
5
6
7
8
9
10
import { FormControl } from '@angular/forms';import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs';searchControl = new FormControl('');results$ = this.searchControl.valueChanges.pipe(debounceTime(300),distinctUntilChanged(),switchMap(term => this.apiService.search(term)));
angular
Erklärung
1
debounceTime(300)
Wartet 300ms nach dem letzten Tastendruck, bevor die Suche ausgelöst wird.
2
distinctUntilChanged()
Wird nur ausgelöst, wenn sich der Suchbegriff vom letzten unterscheidet.
3
switchMap(...)
Bricht die vorherige interne Subscription (API-Aufruf) ab, wenn ein neuer Wert eintrifft.