Question

我遇到一个简单的RxJS流问题，它处理一些输入，启动Ajax请求并处理该请求的结果。

重现问题的一个简单例子：

var requestCalled = 0;

function fakeRequest(value) {
  return new Promise(function(resolve) {
    requestCalled++;
    document.write("<p>"+requestCalled+" ("+value+")</p>");
  });
}

var stream = Rx.Observable.interval(3000)
  .debounce(500)
  .distinctUntilChanged()
  .flatMapLatest(fakeRequest);

stream.subscribe(() => {});
stream.subscribe(() => {});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js"></script>

结果（每个可观察值调用fakeRequest两次）

1 (0)
2 (0)
3 (1)
4 (1)

预期结果（仅调用fakeRequest一次）

1 (0)
2 (1)

所以我希望在RxJS Observable中每个值只调用一次函数fakeRequest。但是当我添加多个订阅者时，每个订阅者都会启动请求。

是否有另一种方法可以替换flatMapLatest，以便只为每个Observable值启动一个请求？

Answer 1

您可以尝试使用.share

var requestCalled = 0;

function fakeRequest(value) {
  return new Promise(function(resolve) {
    requestCalled++;
    document.write("<p>"+requestCalled+" ("+value+")</p>");
  });
}

var stream = Rx.Observable.interval(3000)
  .debounce(500)
  .distinctUntilChanged()
  .flatMapLatest(fakeRequest)
  .share();

stream.subscribe(() => {});
stream.subscribe(() => {});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js"></script>

每个可观察值只调用一次RxJS平面贴图功能

1 个答案: