在 Angular 中反跳 HTTP 请求

Question

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

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

@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();
    }
}

Answer 2

您应该能够通过使用 debounce 函数装饰您的 getEvents 方法来解决此问题：

    function debounce(ms: number) {

        let timeoutId;

        return function (target: Object, propName: string, descriptor: TypedPropertyDescriptor<any>) {
            let originalMethod = descriptor.value;
            descriptor.value = function (...args: any[]) {
                if (timeoutId) return;
                timeoutId = window.setTimeout(() => {
                    timeoutId = null;
                }, ms);
                return originalMethod.apply(this, args);
            }
        }
    }

然后像这样简单地将它应用到你的方法中（将装饰器参数设置为你想要的去抖动时间，以毫秒为单位）：

@debounce(300)
getEvents(filters): Observable < Event[] > {
    ...
}