在发出HTTP请求之前先对其进行限制

Question

我在Angular 2中构建了一个加载微调器组件，该组件要在发出HTTP请求之前触发，并在完成时禁用。问题在于，每次用户更改输入（复选框的选中，在输入框中键入内容）时，都会触发http请求。这意味着很多请求，并且覆盖层不断增加。我想在触发输入后等待一段时间（半秒？），然后再触发http请求，让用户有时间输入其他输入。我已经阅读了一些有关反跳的内容，但据我所知，这是在等待另一个请求之前的时间吗？据我所知，这只是两次请求之间的缓冲时间。

基本上，现在，我有一个处理输入的组件。更改输入时（现在是复选框），将触发以下代码：

@Output() filtersChanged = new EventEmitter();
emitFilters(): void {
    this.filtersChanged.emit(this.filters);
}

通过中介步骤，这会触发我的http请求：

getEvents(filters): Observable<Event[]> {
    this.loadingSpinnerService.showLoadingSpinner();
    let params: URLSearchParams = new URLSearchParams();
    params.set('types', filters.types.join(','));
    params.set('dates', filters.dates.join(','));
    return this.http
        .get('//api.dexcon.local/getEvents.php', { search: params })
        .map((response: Response) => {
            return response.json().events;
        });
}

在Angular 1中，我将其设置为一个超时，该超时在每次用户影响输入时都会刷新，因此它会在触摸最终输入后​​触发设置的时间。这也是在Angular 2中做到这一点的最佳方法吗？根据我的阅读，去抖动将请求锁定在与第二个请求过于接近的位置，但是我想知道如何在给定的时间段内采取措施后最好地防止请求发生。

Answer 1

完成你所追求的最简单的方法是设置一个主题（我假设你可以在这里访问 Rxjs）。在您的组件中初始化一个：

inputSubject: Subject<string> = new Subject<string>();

由于 Subject 既是观察者又是可观察者，因此您需要设置订阅以监听更改。您可以在此处应用去抖动。

this.subscription = this.inputSubject.asObservable()
    .debounceTime(1000)
    .subscribe(x => this.filtersChanged.emit(this.filters));

现在，在您的 emitFilters() 函数中，而不是直接发射，将值推送到主题上。

this.inputSubject.next(newValue);

不要忘记将订阅存储为组件类的成员，并在 OnDestroy() 中正确处理它。

ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
}