时间戳

首页 > 解决方案 > 带有 vue-rx / rxjs 的 VUE：如何使用过滤器和间隔创建带有 $watchAsObservable 的订阅

rxjs - 带有 vue-rx / rxjs 的 VUE：如何使用过滤器和间隔创建带有 $watchAsObservable 的订阅

问题描述

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

我必须在 vue-rx 中订阅一个 props 值，当它为 true 时，它​​每 500 毫秒调用一次 http 请求，并在它为 false 或返回值为“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())),

感谢您的帮助！

标签： rxjsrxjs-observablesvue-rx

解决方案

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

我假设this.$watchAsObservable('started')withpluck('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')
  )
)

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

推荐阅读