Наблюдаемый - получение значения последней эмиссии - PullRequest
Новая
       9

Наблюдаемый - получение значения последней эмиссии

0 голосов
/ 05 апреля 2019

У меня есть форма, и я разрешаю пользователю нажимать столько раз, сколько он хочет, на кнопку обновления.Конечно, я использую оператор debounceTime, но я не знаю, как:

  • отменить предыдущие http-запросы
  • или указать моей службе, чтобы она возвращала значениепоследнее излучение.

Например:

  • t1: click => полученные данные за 2000 мс
  • t2: click => полученные данные за 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());
    }

1 Ответ

0 голосов
/ 05 апреля 2019

Основной трюк заключается в том, чтобы использовать одну подписку (или даже ноль, если вы будете использовать | 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.

Надеюсь, это поможет

...