Angular4 컴포넌트에서 HttpClient 서비스 소비하기

Question

저는 파이썬 배경에서 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'); 
    } 
} 

내 구성 요소는 서비스를 소비 오류를 처리합니다. 내가 파이썬에서이 일 경우 내가 좋아하는 뭔가를 줄 반면 :

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에 따라 다르지만 여기에 옳고 그른 것은 없습니다.

<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> 

:

그러나, 매핑 데이터로, 당신은 아마 구성 요소 코드에서 구독하고 템플릿에 다음

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 
} 

이제까지 가능한 비동기 파이프를 사용하고자 싶지 않아

구독을 비동기 처리하는 것이 훨씬 더 좋습니다. 구독 한 모든 결과가 수신됩니다. 이렇게하면 구독 관리가 항상 올바르게 처리되고 메모리 누출을 방지 할 수 있습니다. 또한 비동기 트리거를 사용하여 구독을 감지하면 코드가 간단하게 청소됩니다.