Question

我有一个表单，并且允许用户在刷新按钮上单击任意次数。当然，我使用debounceTime运算符，但我不知道如何：

取消先前的http请求
或指示我的服务以返回最新排放的值。

例如：

t1：单击=>在2000毫秒内收到数据
t2：单击=>在200毫秒内收到数据

因此，我将从t1时刻获取数据，而最新的是t2。

我尝试使用pipe(last())，switchMap，但是我不返回数据。

我的组件

    this.filtersForm.valueChanges.pipe(debounceTime(500)).subscribe(
      form => {
        this.service.setFilters(form); // Set private field in service (1)
        this.onSubmit();
      }
    );

  onSubmit() {
    if (this.filtersForm.valid) {
      this.service.notifFiltersHasChanged();
    }
  }

服务：

    ctor(...) {
        this.filters$.subscribe(f => this.getData());
    }

    notifFiltersHasChanged() {
        this.filters$.next(this._filters); // (1) _filters is set by setFilters method
    }

    getData(): void {
        // ...
        this.backEndService.getAll(this._filters).subscribe(data => this._data = data);
    }

BackEndService：

    getAll(filters: any): Observable<Data> {
        return this.httpClient.get<Data>(url).pipe(last());
    }

Answer 1

主要技巧是使用单个订阅（如果您在模板中使用| async管道，则甚至可以使用零个订阅）。因此，您从Observable采购并通过服务进行链接。

这里有您的更新示例：

组件

onDestroy$ = new Subject<void>();

constructor(){
  this.filtersForm.valueChanges.pipe(
    // accept only valid values
    filter(() => this.filtersForm.valid),
    // debounce them
    debounceTime(500),
    // when a value comes in -- we switch to service request
    // subsequent values would cancel this request
    switchMap(formValues => this.service.getData(formValues)),
    // this is needed to unsubscribe from the service
    // when component is destroyed
    takeUntil(this.onDestroy$)
  )
  .subscribe(data=>{
    // do what you need with the data
  })
}

ngOnDestroy() {
  this.onDestroy$.next(void 0);
}

服务

// service becomes stateless
// its only responsible for parsing and passing data
getData(filters): Observable<Data> {
    return this.backEndService.getAll(filters);
}

BackEndService

getAll(filters: any): Observable<Data> {
    return this.httpClient.get<Data>(url).pipe(last());
}

另一种方法是拥有一个Subject，您可以将其推入。否则，在该Subject上将是相同的链接。

希望这会有所帮助

可观察-获得最新排放的价值

1 个答案: