将新的 rxjs observable 合并到现有的订阅 observable 中

Question

我有一个已订阅的 rxjs observable：

const o = new rxjs.Subject();
o.subscribe( (v) => console.log("value: " + v);

由于一些不相关的事件，例如用户单击按钮，我需要从服务器获取数据，并将该数据放入现有的 observable o。使用 axios，我有这样的东西：

const aPromise = axios.get("someurl...")

然后我执行以下操作：

const secondObservable = rxjs.of(aPromise)
                             .subscribe( (response) => o.next(response.data) )

我的问题是，是否有更好的方法将响应数据放入已订阅的现有 observable 中，也许使用运算符？

Answer 1

如果您知道您需要来自原始流的数据并且可能会通过单击按钮获得更新 - 那么我们将需要创建一个按钮单击流，例如

const btnClick$ = new rxjs.Subject();

onClick(){
  this.btnClick$.next(void 0);
}

然后我们将把这个btnClick$流变成一个http-get请求流，使用switchMap：

const request$ = btnClick$.pipe(
  // each click will be turned into a http-get
  switchMap(() => rxjs.of(axios.get("someurl...")))
)

我们已经准备好在点击按钮时使用来自服务器的原始数据流和可能的数据更新流的结果：

// we'll take results both from original stream
// and our new possible source of data
merge(original$, request$).subscribe(data => {
  console.log(data);
})

这是一个使用模拟的小应用：

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

// create a stream of btn clicks
const theButton = document.getElementById('the-btn');
const btnClicks$ = fromEvent(theButton, 'click');

console.log('Processing...');

// clicks turned into http-gets
const request$ = btnClicks$.pipe(
  switchMap(() => makeRequest())
);

// original source of data
const original$ = of('Please, click the button!').pipe(delay(500));

merge(original$, request$)
  .subscribe(data => {
    console.log(data);
  });

// mock for requests
function makeRequest(){
  return of(Date.now()).pipe(delay(500))
}

<script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>

<button
  id="the-btn"
  >Click me!</button>

希望对你有帮助

Answer 2

您可以直接将调用结果传递给您的 observable。

const axios = {
  get: url => Promise.resolve('some value')
};

const o = new rxjs.Subject();
o.subscribe(v => { console.log("value: " + v); });

axios.get('url').then(data => { o.next(data); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>