通过使用Http,我们调用一个执行网络调用并返回http observable的方法:
getCustomer() {
return this.http.get('/someUrl').map(res => res.json());
}
如果我们采用这个可观察的并添加多个订阅者:
let network$ = getCustomer();
let subscriber1 = network$.subscribe(...);
let subscriber2 = network$.subscribe(...);
我们想要做的是确保这不会导致多个网络请求.
这可能看起来像是一个不寻常的场景,但实际上很常见:例如,如果调用者订阅了observable以显示错误消息,并使用异步管道将其传递给模板,那么我们已经有两个订阅者.
在RxJs 5中这样做的正确方法是什么？
也就是说,这似乎工作正常:
getCustomer() {
return this.http.get('/someUrl').map(res => res.json()).share();
}
但这是在RxJs 5中这样做的惯用方式,还是我们应该做其他事情呢？
注意:根据Angular 5 new HttpClient,.map(res => res.json())所有示例中的部分现在都没用,因为现在默认采用JSON结果.
我试图使用Angular 2中的Http类获取一个json文件.我按照Angular 2主页上的示例进行操作:https://angular.io/docs/js/latest/api/http/Http-class.html.但是,我收到以下错误消息.我使用的是Angular 2.0.0-alpha.37,traceur 0.0.91,systemjs 0.16.11,es6-module-loader 0.16.6和typescript 1.6.2.关于这里可能有什么问题的任何想法？
app.ts
///<reference path="typings/angular2/angular2.d.ts"/>
///<reference path="typings/angular2/http.d.ts"/>
import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';
@Component({
selector: 'myApp',
viewBindings: [HTTP_BINDINGS]
})
@View({
templateUrl: 'myapp.html'
})
class MyComponent {
data: Object;
constructor(http: Http) {
http.get('data.json').toRx().map(res => res.json()).subscribe(data => this.data = data);
}
}
bootstrap(MyComponent);
的index.html
<!DOCTYPE html>
<html>
<head>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
</head>
<body>
<myApp></myApp>
<script>
System.import('app');
</script>
</body>
</html>
结果 …