Angularjs Angular 1服务-RxJS共享运营商工作不正常
我创建了一个使用Angularjs Angular 1服务-RxJS共享运营商工作不正常,angularjs,rxjs,angularjs-service,rxjs5,Angularjs,Rxjs,Angularjs Service,Rxjs5,我创建了一个使用RxJS包装$http调用的服务 我有几个组件订阅相同的observable,我希望它们共享AJAX结果,而不是发出多个请求 服务代码: export function SearchService($http) { 'ngInject'; const autocompleteResults$ = new Subject() .debounceTime(250) .switchMap(query => Observable.f
RxJS
包装$http
调用的服务
我有几个组件订阅相同的observable,我希望它们共享AJAX结果,而不是发出多个请求
服务代码:
export function SearchService($http) {
'ngInject';
const autocompleteResults$ = new Subject()
.debounceTime(250)
.switchMap(query => Observable.fromPromise($http.post('/search', { query })))
.share()
.map(result => result.data);
function autocomplete(query) {
autocompleteResults$.next(query);
}
return {
autocomplete,
autocompleteResults$
};
}
export const myComponent = {
bindings: {
query: '<'
},
templateUrl: templateUrl,
controller: myController
};
function myController($SearchService) {
'ngInject';
const $ctrl = this;
$ctrl.$onInit = $onInit;
$ctrl.$onChanges = $onChanges;
function $onInit() {
SearchService.autocompleteResults$
.subscribe(
handleSuccess,
handleError
);
}
function $onChanges(changes) {
if (changes.query && changes.query.currentValue)
SearchService.autocomplete(changes.query.currentValue);
}
}
组件代码:
export function SearchService($http) {
'ngInject';
const autocompleteResults$ = new Subject()
.debounceTime(250)
.switchMap(query => Observable.fromPromise($http.post('/search', { query })))
.share()
.map(result => result.data);
function autocomplete(query) {
autocompleteResults$.next(query);
}
return {
autocomplete,
autocompleteResults$
};
}
export const myComponent = {
bindings: {
query: '<'
},
templateUrl: templateUrl,
controller: myController
};
function myController($SearchService) {
'ngInject';
const $ctrl = this;
$ctrl.$onInit = $onInit;
$ctrl.$onChanges = $onChanges;
function $onInit() {
SearchService.autocompleteResults$
.subscribe(
handleSuccess,
handleError
);
}
function $onChanges(changes) {
if (changes.query && changes.query.currentValue)
SearchService.autocomplete(changes.query.currentValue);
}
}
export const myComponent={
绑定:{
查询:“您描述的内容似乎更像是在寻找缓存,而不是共享和可观察
当您使用share()
时,您只是在共享对其源可观察对象的相同订阅,而不是其结果
例如,如果一个HTTP请求需要100毫秒,那么即使使用share()
,也会发出两个请求:
share()
操作符在这里根本帮不了你,因为在第一个HTTP请求完成后,观察者取消订阅,而share()
中的主题也取消订阅。然后1s后,你进行另一个订阅,它需要再次重新订阅,从而发出另一个HTTP请求
但是,如果您执行了以下操作,则只会发出一个HTTP请求:
const source = this.http.get(...).share();
source.subscribe(...);
source.subscribe(...);
当第二个观察者订阅时,第一个观察者仍然处于活动状态,并通过share()
进行多播。因此,您只需进行一次HTTP调用
也许您正在寻找这样的东西,可以将接收到的值回放1s:
const source = this.http.get(...)
.publishReplay(1, 1000)
.refCount()
.take(1);