javascript - RxJS Observable.if 执行这两个语句

Question

因此，我对 RxJs 和 Observable 模式总体来说还比较陌生，目前正在努力理解所提供的一些功能以及它们为何以这种方式运行。

这是一个代码片段:

Observable.if( //can also be onErrorResumeNext
  () => true,
  Observable.fromPromise(
    fetch('/'+ locale + '_state.json', {
      headers: {
        'Accept': 'application/json'
      },
      method: 'GET'
    }).then(res => {
      if (!res.ok) {
        throw new Error(res.statusText);
      }

      return res.json();
    })
  ),
  Observable.fromPromise(
    fetch('/'+ defaultLocale + '_state.json', {
      headers: {
        'Accept': 'application/json'
      },
      method: 'GET'
    }).then(res => {
      if (!res.ok) {
        throw new Error(res.statusText);
      }

      return res.json();
    })
  )
)

为什么这两个语句都会被执行？我是在以错误的方式做某事/接近这个还是这是预期的行为？返回更简单的内容，如 Observable.if 的示例工作正常，但据我所知，RxJs 主要用于异步数据，所以上面的示例不应该以相同的方式运行吗？

我知道我可以使用 Observable.mergeMap 重写 Observable.if 和 Observable.onErrorResumeNext 的行为，这就是我最终所做的，但感觉我在这里遗漏了一些东西。

Answer 1

promise 不是懒惰的，它会立即执行。使计算变得惰性的最简单方法是像这样使用 .defer:

Observable.if( //can also be onErrorResumeNext
  () => true,
  Observable.defer(() =>
    fetch('/'+ locale + '_state.json', {
      headers: {
        'Accept': 'application/json'
      },
      method: 'GET'
    }).then(res => {
      if (!res.ok) {
        throw new Error(res.statusText);
      }

      return res.json();
    })
  ),
  Observable.defer(() =>
    fetch('/'+ defaultLocale + '_state.json', {
      headers: {
        'Accept': 'application/json'
      },
      method: 'GET'
    }).then(res => {
      if (!res.ok) {
        throw new Error(res.statusText);
      }

      return res.json();
    })
  )
)

.defer 会自动将 promise 升级为 observable。