将 Angular2 Http 响应转换为 ConnectableObservable [英] Converting Angular2 Http response to ConnectableObservable

问题描述

我必须承认我正在用 Angular2 做我的第一步，我在这里遇到了一个问题，我在理解上有一些问题.我正在使用 angular2@2.0.0-beta.0，它依赖于 rxjs@5.0.0-beta.0.

I must admit that I am doing my first steps with Angular2, and I am running into an issue here, which I have some problems understanding. I am using angular2@2.0.0-beta.0, which has a dependency on rxjs@5.0.0-beta.0.

我的目的是发出 HTTP 请求(到 REST 服务)并允许将响应发送给返回的 observable 的多个订阅者.如果我正确理解文档，我可以使用 publish() 函数来转换由例如返回的 Observablehttp.post 函数到 ConnectableObservable，通过多次调用 ConnectableObservable.subcribe(...) 注册多个订阅者，然后调用 ConnectableObservable.connect() 来实际执行 HTTP 请求，例如像这样:

My intention is to make an HTTP request (to a REST service) and allow the response to be sent to multiple subscribers of the returned observable. If I understand the documentation correctly, I can use the publish() function to convert the Observable returned by e.g. the http.post function to a ConnectableObservable, register multiple subsribers by invoking ConnectableObservable.subcribe(...) multiple times and then invoke ConnectableObservable.connect() to actually perform the HTTP request, e.g. like this:

var obs: Observable<Response> = this.http.post(...);
var cobs: ConnectableObservable<Response> = obs.publish();
cobs.subscribe(sub1);
cobs.subscribe(sub2);
cobs.connect();

至少我的 IDE 接缝同意这一点并且没有显示任何警告.运行代码，但我收到以下错误:

At least my IDE seam to agree with this and does not show any warnings. Running the code, I do however get the following error:

例外:评估点击"时出错
原始例外:类型错误:obs.publish 不是函数

EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: obs.publish is not a function

如果我检查调试器中的 obs 对象，只有 文档化的函数 实际上是可用的.如果我查看 Observable 的实现 类，只有一个很少有记录在案的功能确实得到了实现.大多数函数，其中包括publish 函数，只是声明为函数签名，没有任何实际实现.

If I examine the obs object in the debugger, only a very small subset of the documented functions are actually available. If I look into the implementation of the Observable class, only a few of the documented functions are indeed implemented. Most of the functions, among them the publish function, are only declared as a function signature without any actual implementation.

我是否在这里做错了什么，或者我完全误解了如何使用 RxJS observables?

Am I doing something obviously wrong here or have I misunderstood completely how to work with RxJS observables?

如果重要的话，我正在使用 gulp 构建，使用 npm 来解析和下载依赖项，并从我的 node_modules 目录中包含 rxjs/bundles/Rx.js.

If it matters, I am building with gulp, using npm to resolve and download dependencies and including rxjs/bundles/Rx.js from my node_modules directory.

推荐答案

事实上，我认为使用 ConnectableObservable 是没有必要的.这是我所做的测试，当收到响应时，两个订阅者都会被调用:

In fact, I think that using a ConnectableObservable isn't necessary. Here is the test I made and both subscribers are called when the response is received:

var observable =
  this.http.get('https://angular2.apispark.net/v1/companies/')
           .map(res => res.json());

observable.subscribe(
  data => console.log('subscribe #1'));
observable.subscribe(
  data => console.log('subscribe #2'));

编辑

我认为 share 运算符可以满足您的需求:

I think that the share operator can fit your needs:

var observable =
  this.http.get('https://angular2.apispark.net/v1/companies/')
           .map(res => res.json()).share();

observable.subscribe(
  data => console.log('subscribe #1'));
observable.subscribe(
  data => console.log('subscribe #2'));

它允许创建一个可连接的 observable(share 方法返回一个热 observable).在这种情况下，只执行了一个 HTTP 请求...

It allows to create a connectable observable (the share method returns an hot observable). In this case, only one HTTP request is executed...

这个问题可能对你有帮助:来自 EventEmitter 的热共享 Observable.

This question could be helpful for you: Hot and shared Observable from an EventEmitter.

编辑1

在评论中进行了一些讨论后，似乎问题是关于为什么会出现以下错误:TypeError: obs.share is not a function 以及为什么几乎所有记录的函数在post函数返回的observable.

After some discussions in comments, it appears that the question was about why the follwing error occurs: TypeError: obs.share is not a function and why are almost all of the documented functions not available in the observable returned by the post function.

所以解决方案是显式导入 RxJS 操作符，使其在运行时可用.

So the solution was to explicitly import RxJS operators to make them available at runtime.

有两种解决方案.按操作员导入:

There are two solutions. Importing per operator:

import 'rxjs/add/operator/map'

或者更一般地说，如果您想为 observable 提供所有可用的操作符方法:

Or more generally this if you want to have all available operator methods for observables:

import 'rxjs/Rx';

希望对你有帮助蒂埃里

这篇关于将 Angular2 Http 响应转换为 ConnectableObservable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！