Question

根据此文档https://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/index.html，Observable方法和Observable实例方法之间存在主要区别。我知道Observable方法总是在Observable实例方法之前调用。希望这是真的。但是我们可以用来组合/混合Observable实例方法的顺序是什么？

我要解决的问题是为什么两个相似的Observable的结果不一样。

第一个：

let getRequestJson = this.http.get(this.config.apiUrl + '/users', new RequestOptions({params: this.params}))
    .map((response: Response) => response.json());
console.log(getRequestJson);

let doThroughTheJsonData = getRequestJson.do(data => {
  this.count = data.count;
  this.loading = false;
  this.currentPage = page;
});
console.log(doThroughTheJsonData);

this.asyncUsers = doThroughTheJsonData.map(data => { 
  return data.user; 
});
console.log(this.asyncUsers);

输出：

Observable {_isScalar: false, source: Observable, operator: MapOperator}
Observable {_isScalar: false, source: Observable, operator: DoOperator}
Observable {_isScalar: false, source: Observable, operator: MapOperator}

第二个：

this.params.page = page;
    let options = new RequestOptions({ params: this.params });

    let getRequest = this.http.get(this.config.apiUrl + '/users', options);
    console.log(getRequest);
    let doThroughTheData = getRequest.do(data => {
        this.count = data.json().count;
        this.loading = false;
        this.currentPage = page;
      });
    console.log(doThroughTheData);
    this.asyncUsers = doThroughTheData.map((response: Response) => response.json().users);
    console.log(this.asyncUsers);

输出：

Observable {_isScalar: false, source: Observable, operator: CatchOperator}
Observable {_isScalar: false, source: Observable, operator: DoOperator}
Observable {_isScalar: false, source: Observable, operator: MapOperator}

最后我在asyncUsers中收到的内容似乎与Observable不同，尽管应该是相同的。在我做的第一个 1.映射数据以json格式转换数据。 2.然后可观察到DO从json数据中获取一些数据 3.我再次使用MAP来获取json数据中的用户数据。

在第二个我做的 1.首先DO和内部我首先将响应数据传输到json，然后我得到了我需要的东西 2.然后MAP转换为json并仅获取来自json数据的用户数据。

这个问题Observable是否具体，是否与map-do-map / do-map方法的顺序有关，或者是明确的打字稿错误。

Answer 1

您需要一个Observable实例才能调用它的方法。要创建一个Observable，您可以使用一个Observable，也可以使用静态方法/构造函数创建一个。

一般Rx工作流程：

获取一些Observable（外部/静态方法）
转换Observable（实例方法）
subscribe以获取数据

获取可观察

var instance = Rx.Observable.of(1, 2, 3)

为您提供值1,2和3的流。

var instance = new Rx.Observable(observer => { 
  /* do whatever you want with observer
     for example: */
  observer.next(1)
  observer.next(2)
  observer.next(3)
  observer.complete()
})

给你一个同样表现的Observable。

您还可以从外部获取Observable：在您的示例中http.get返回一个Observable。

使用/转换Observable

创建/检索Observable后，您可以使用Observable实例上的任何方法来转换流或其内容。

例如：

var doubled = instance.map(x => x * 2)

将内部的一切都加倍。 instance未被修改。您创建了一个新的Observable实例doubled，其行为相同，但值为double。

有很多运营商。有关完整列表，请参阅http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html。

使用Observable

这是从Observable中提取数据的地方。这是你会做副作用的地方。您可以致电subscribe，每次有新数据可用时，都会调用回调。

doubled.subscribe(x => view.x = x)

在你的情况下：

var subscription = getRequestJson.subscribe(data => {
  this.count = data.count;
  this.loading = false;
  this.currentPage = page;
});

您从调用subscribe中获得的是一个对象，您可以使用该对象让源知道您不再感兴趣。 subscription.unsubscribe()确保不再调用您的回调。

您的样本

您似乎记录了Observable本身，而不是内部的值。将Observable视为数据流动的蓝图。它本身并不那么有趣，有趣的是里面有什么。因此，请使用subscribe获取该数据。

您使用.do(...)来设置某些值，而不是do;）。如果你一直使用.do，你可能最终会遇到什么都没做的情况：如果你从来没有打过订阅，你就永远不会让消息来源知道你有兴趣。

如果您正在使用像Angular这样的东西，Angular可能会为您调用subscribe，但前提是您将Observable移交给Angular。如果让它松散，则不会创建订阅。

可以使用RxJS运算符的顺序

1 个答案: