I have asked关于Code Review StackExchange的这个问题但是那里的人少得多,没有人回答我的问题,所以我决定在这里问一下。请不要因此而吃我。如果有更好的社区要求,请指出我,我会从这里删除这个问题。
我有一个组件和服务。该服务正在联系API并获取应在组件中处理的数据。现在,我可以通过两种方式实现这一目标:
Observable
,该组件已订阅并处理更改Observable
,组件订阅每个调用,然后处理更改。让我展示一个最小的例子。
所以这是第一个解决方案:
我-service.service.ts
@Injectable()
export class MyService {
requestObservable: Observable<any>;
private requestObserver: Observer<any>;
constructor(private http: Http) {
this.requestObservable = new Observable<any>(observer => {
this.requestObserver = observer;
});
}
get(id: string): void {
this.http
.get(`/some/url/${id}`)
.map(response => response.json())
.subscribe(
next => this.requestObserver.next(next)
);
}
}
我-component.component.ts
@Component({...})
export class MyComponent implements OnInit {
constructor(private myService: MyService) {
this.myService.requestObservable.subscribe(
next => this.handleChanges(next)
);
}
ngOnInit(): void {
this.myService.get(1);
this.myService.get(2);
}
handleChanges(changes: any): void {
console.log(changes);
}
}
这是相同的情况,但以第二方式解决:
我-service.service.ts
@Injectable()
export class MyService {
constructor(private http: Http) {}
get(id: string): Observable<any> {
return this.http
.get(`/some/url/${id}`)
.map(response => response.json());
}
}
我-component.component.ts
@Component({...})
export class MyComponent implements OnInit {
constructor(private myService: MyService) {}
ngOnInit(): void {
this.myService.get(1).subscribe(
next => {
console.log(next);
}
);
this.myService.get(2).subscribe(
next => {
console.log(next);
}
);
}
}
因此,您可以看到两个示例都在做同样的事情,但在其他方面。我省略了不必要的import
和其他事情,因为它们与我的问题无关。
我会说第一个解决方案更清晰,因为它让我有可能对同一个get()
方法进行多次调用,并且有一个方法可以处理所有这些方法。
另一方面,如果我的服务中有更多不同的方法,并且每个方法都必须使用不同的Observable
,那么它会使我的服务更复杂,可读性更低。
请建议哪种解决方案更好?