使用Observable并订阅其更改 - 哪种解决方案更好?

时间:2018-02-28 10:50:55

标签: angular typescript rxjs

I have asked关于Code Review StackExchange的这个问题但是那里的人少得多,没有人回答我的问题,所以我决定在这里问一下。请不要因此而吃我。如果有更好的社区要求,请指出我,我会从这里删除这个问题。

我有一个组件和服务。该服务正在联系API并获取应在组件中处理的数据。现在,我可以通过两种方式实现这一目标:

  1. 在我的服务中创建一个公共Observable,该组件已订阅并处理更改
  2. 我服务中的所有方法都返回Observable,组件订阅每个调用,然后处理更改。
  3. 让我展示一个最小的例子。

    所以这是第一个解决方案:

    我-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,那么它会使我的服务更复杂,可读性更低。

    请建议哪种解决方案更好?

0 个答案:

没有答案