VUE с помощью vue-rx / rxjs: как создать подписку с помощью $ watchAsObservable, используя фильтр и интервал

#rxjs #rxjs-observables #vue-rx

#rxjs #rxjs-наблюдаемые #vue-rx

Вопрос:

Мне нужна помощь в следующем вопросе vue-rx / RxJS.

Я должен создать подписку в vue-rx, которая отслеживает значение реквизита, и когда оно равно true, он вызывает http-запрос каждые 500 мс и останавливает его, когда оно равно false или когда возвращаемое значение «ЗАВЕРШЕНО».

Я пробовал что-то вроде этого:

 export default {
  props: ['started'],
  subscriptions() {
   return {
    currentHttpState: this.$watchAsObservable('started')
                      .pipe(pluck('newValue'),filter(value => value === false))
                      .switchMap(() => interval(500).pipe(switchMap(() => this.callHttpRequest()),distinctUntilChanged())),
  

Спасибо за помощь!

Ответ №1:

Я не слишком знаком с vue (или vue-rx), так что это может быть только половина ответа (бит RxJS).

Я предполагаю this.$watchAsObservable('started') , что with pluck('newValue') — это поток true и false ? (отражающий ценность started реквизита)

Если это так, я бы использовал switchMap для переключения между интервалом / таймером и ничем.

 currentHttpState: this.$watchAsObservable('started').pipe(
  pluck('newValue'),
  map(val => val? timer(0,500) : EMPTY),
  switchMap(timer$ => timer$.pipe(
    switchMap(_ => this.callHttpRequest()),
    takeWhile(result => result.status !== 'COMPLETED')
  )
)
  

эта вторая карта переключения приведет к тому, что если вызов займет более 500 мс, он будет отброшен, и вы никогда не увидите результатов. Это также отменяет подписку, если takeWhile() условие не выполнено, поэтому вам придется изменить это в соответствии с вашими конкретными требованиями.

Комментарии:

1. Спасибо Mrk Sef, это работает как шарм! Не хватало только одного ‘)’.