Как вызвать наблюдаемый rxjs - PullRequest
Новая
       5

Как вызвать наблюдаемый rxjs

0 голосов
/ 29 июня 2018

Использование rxjs v6

Итак, у меня есть несколько переменных, которые я хочу отслеживать / наблюдать, и когда любая из них изменяется, запускаю Observable для вызова API, который затем обновляет что-то еще на основе этих переменных.

Я думал, что мог бы вызвать событие на div, чтобы заставить наблюдаемое что-то сделать, но это не возвращает результаты, основанные на том, что я хочу

1010 * Е.Г. * 

var a, b, c, d // if any updates, should trigger div "update" event

let obs = fromEvent(this.$refs.updater, "update")
    .pipe(
        switchMap(i => {return this.callAnAPI()})
    )
obs.subscribe()

var update = new Event("update")
this.$refs.updater.dispatchEvent(update)

Однако в наблюдаемой нет метода подписки. Я пытался изменить один из моих других Observables (который работает) 

fromEvent(input, "keyup")
    .pipe(
        map(i => i.currentTarget.value),
        debounceTime(delay),
        distinctUntilChanged(),
        switchMap(value => 
        {
            this.page = 1
            if (ajax)
            {
                return ajax
            }   
            else
            {
                return this.axiosAjax({
                    path,
                    method,
                    data: {
                        ...data,
                        [term]: value
                    }
                })
            }    
        })
    )

1 Ответ

0 голосов
/ 29 июня 2018

Исходя из названия вашего вопроса, я предполагаю, что ваше пользовательское событие - это всего лишь средство для достижения цели.

Если так, я не думаю, что это действительно необходимо. Если вы хотите «извне» влияния (или триггера) на наблюдаемое, используйте Subject.

Например: 

const { fromEvent, merge, of, Subject } = rxjs;
const { switchMap, delay } = rxjs.operators;

// fake api
const fakeApi$ = of(Math.random()).pipe(
  delay(2000),
);

// store a reference to the subject
const triggerApi$ = new Subject();

// apply behavior
const api$ = triggerApi$.pipe(
  switchMap(
    () => {
      console.log('switching to api call');

      // delegate to api call
      return fakeApi$;
    }
  )
);

// activate (handle result)
api$.subscribe((result) => {
  console.log('api result', result);
});

// some outside triggers
const fooClicks$ = fromEvent(document.getElementById('foo'), 'click');
const barClicks$ = fromEvent(document.getElementById('bar'), 'click');
const bazChanges$ = fromEvent(document.getElementById('baz'), 'change');

// combined
const updates$ = merge(fooClicks$, barClicks$, bazChanges$);

// activate
updates$.subscribe(triggerApi$);
<script src="https://unpkg.com/rxjs@6.2.1/bundles/rxjs.umd.min.js"></script>

<button id="foo">foo</button>
<button id="bar">bar</button>
<textarea id="baz"></textarea>
...