Question

我是Python背景的新手Angular4，并尝试了解创建HTTPClient服务然后在组件中使用该服务的最佳模式。

我的服务如下：

@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');
  }
}

我的组件使用该服务如下：

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'); }
        });
    }
}

这有效，但感觉服务漏洞，因为消费者必须映射数据并处理错误。如果我在Python中这样做，我会有类似的东西：

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

Answer 1

您在何处以及如何处理错误完全取决于您，您可以在服务层中找到：

/static/a.css

或者像你一样在组件级别进行，通常面向用户的界面想知道错误，根据类型，你拥有世界上所有的灵活性。这里没有对错，因为它取决于您的应用以及您尝试构建的用户界面和用户体验。

但是，对于映射数据，您可能不想订阅组件代码，并希望尽可能使用异步管道

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
   });
}

然后在模板中：

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
}

让异步处理您的订阅要好得多，它会收到您订阅的内容的结果。这可以确保始终正确处理订阅管理并保护您免受内存泄漏的影响。此外，使用异步触发器更改检测的订阅和您的代码更简洁

Angular4在组件中使用HttpClient服务

1 个答案: