Angular: Observable 多次执行请求

Question

我在

中使用 observable

服务

getMembers(): Observable<any[]> {
return this._http.get('http://localhost/membership/main/getUsers')
  .map(response => response.json() );
}

分量

members$: Observable<any[]>;
ngOnInit() {
 this.members$ = this._membersService.getMembers()
}

请求

-getUsers
-getUsers

两个return相同的JSON数据

每次我加载页面时，它 return 都是一个重复的请求。这与冷热要求无关。因为两个请求 return 相同的响应。但是当我删除可观察对象时，一切正常。只有一个请求

Answer 1

我猜您在模板的两个不同位置使用了 async 管道。为避免重新执行请求，您可以使用 share 运算符

import 'rxjs/add/operator/share';

members$: Observable<any[]>;
// I personally prefer to set observables in ctor
constructor() {
 this.members$ = this._membersService.getMembers().share();
}

可以找到有关运算符的更多信息 here

另一种方法是在 ng-container:

的帮助下在一个地方使用 async 管道

//template
<ng-container *ngIf="members$ | async as members">
   <span *ngIf="members.length === 0; else showMembers">No members!</span>
   <ng-template #showMembers>
     <div *ngFor="let member of members">{{member | json}}</div>
   </ng-template>
</ng-container>

Answer 2

如果您运行在 Angular 6+.

中跨越此内容，请更新

import { share } from 'rxjs/operators';
...
this._membersService.getMembers().pipe(share());

现在是正确的语法。

Angular: Observable 多次执行请求

Angular: Observable executes request multiple times

angular

rxjs

angular2-http