VUE with vue-rx / rxjs : 如何使用过滤器和间隔创建订阅 $watchAsObservable

Question

我需要以下 vue-rx / RxJs 问题的帮助。

我必须在 vue-rx 中订阅一个 props 值，当它为真时，它每 500 毫秒调用一次 http 请求，当它为假或返回值时停止它是 'COMPLETED'.

我试过这样的事情：

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())),

感谢您的帮助！

Answer 1

我不太熟悉 vue（或 vue-rx），所以这可能只是答案的一半（RxJS 位）。

我假设 this.$watchAsObservable('started') 和 pluck('newValue') 是 true 和 false 的流？（反映 started 道具的价值）

如果是这样，我会使用 switchMap 在 interval/timer 和无之间切换。

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')
  )
)

第二个 switchMap 的效果是，如果调用需要超过 500 毫秒才能完成，它将被丢弃，您将永远看不到结果。如果不满足 takeWhile() 条件，这也会退订 - 因此您必须更改它以满足您的特定要求。

VUE with vue-rx / rxjs : 如何使用过滤器和间隔创建订阅 $watchAsObservable

VUE with vue-rx / rxjs : How to create a subscription with $watchAsObservable using filter and interval

rxjs

vue-rx

rxjs-observables