Angular4コンポーネント内のHttpClientサービスを消費する

Question

私はPythonの背景からAngular4を初めて使い、HTTPClientサービスを作成するための最良のパターンを理解してから、そのコンポーネントをコンポーネントで消費しています。

私のサービスは、次のようになります。

export class DataManagementComponent implements OnInit { 

    constructor(private datasetService: DatasetService) { } 

    ngOnInit() { 
    this.datasetService.getDatasets() 
     .subscribe(
     data => { 
      console.log(data['datasets']); 
     }, 
     error => { 
      if (error.status === 404) {console.log('No records'); } 
     }); 
    } 
} 

これは動作しますが、消費者がデータをマッピングする必要があるため、サービスが漏出性であるようにそれは感じている：次のように

@Injectable() 
export class DatasetService { 
    constructor(private http: HttpClient) { } 

    getDatasets(): Observable<Array<Dataset>> { 
    // Get list of all datastes 
    return this.http.get<Array<Dataset>>('http://localhost:5000/api/v2/admin/dataset/list'); 
    } 
} 

私のコンポーネントがサービスを消費しますエラーを処理します。私はPythonでこれをやっていた場合、私のようなものを持っていると思いに対し：

try: 
    mydata = DatasetService.getDatasets() 
except as e: 
    print(e) 

Answer 1

どこで、あなたは完全にあなた次第ですエラーを処理する方法を、あなたのサービス層でキャッチすることができます：

getDatasets(): Observable<Array<Dataset>> { 
    // Get list of all datastes 
    return this.http.get<Array<Dataset>>('http://localhost:5000/api/v2/admin/dataset/list') 
    .catch(err => { 
    console.log('I caught an error'); 
    // maybe redirect? 
    return Observable.throw(err); //option to rethrow 
    //return Observable.of({isError:true, message: err.json()}); //or some standard error interface 
    //return Observable.empty(); //or just swallow it 
    }); 
} 

かあなたが持っているようなコンポーネントレベルでそれをやってください。通常、インターフェイスに直面しているユーザーは、エラーについて知りたいと思っています。タイプによっては、世界のすべての柔軟性があります。あなたのアプリとあなたのUIとあなたが構築しようとしているあなたのUXに依存するので、ここでは間違いない。

しかし、マッピングデータ用として、あなたはおそらくコンポーネントのコードで購読したい、とテンプレートで、その後

dataSet$: Observable<Array<Dataset>>; 
ngOnInit() { 
    this.dataSet$ = this.datasetService.getDatasets() 
        .map(data => data) // optional transformation of data 
        .catch(err => Observable.throw(err)); //optional component error handling 
} 

これまでの可能な非同期パイプを使用したくない：

<div *ngIf="dataSet$ | async as dataSet; else loading> 
    <!-- logic to display your data set goes here, can also use async in ngFor --> 
</div> 
<ng-template #loading>Optional Loading template...</ng-template> 

サブスクリプションを非同期で処理する方がずっと優れています。サブスクリプションを購読した結果を受け取ることができます。これにより、サブスクリプション管理が常に適切に処理され、メモリリークを防ぐことが保証されます。また、非同期トリガー変更検出を使用するサブスクリプションとコードは単純にクリーナーです