在构建数据之前从 HTTP GET 返回使用 Observable 的 Angular 6 函数答案

【问题标题】：Angular 6 functions that consumes Observable from HTTP GET returns before building the Data在构建数据之前从 HTTP GET 返回使用 Observable 的 Angular 6 函数
【发布时间】：2018-10-03 20:46:43
【问题描述】：

我正在尝试从 REST 端点读取数据。读取数据后，我想构造一个实例列表并返回该列表。

但是由于HTTP GET 函数返回一个Observable 方法，所以在从响应构造它之前总是返回和空列表。

这是我的代码：

 public getUsers() {
    let responseValue = this.http.get(this.utils.provideserviceURL('http://test.com/users'));

    responseValue.toPromise()
    .then(result => {
      let usersList: User[] = [];
      let jsonResult = result.json();
      for (let temp of jsonResult) {
        let tempUser = new User(jsonResult.id, jsonResult.username, jsonResult.password, jsonResult.firstName, jsonResult.lastName);
        usersList.push(tempUser);
      }
      console.log(usersList);
      return usersList;
    })
    .catch(err => {
      // Error while fetching Users
      console.log('Error');
    });

  }

这里的函数返回undefined，然后用正确的数据打印控制台。

我不完全了解使用toPromise() 的正确方法。如果它已经被讨论过，请指出我的帖子并将这个问题作为重复。

【问题讨论】：

如果以下链接的信息属实，则不推荐使用 toPromise。 learnrxjs.io/operators/utility/topromise.html 但是，我希望你所做的工作。我建议您研究 Observables 的基础知识，并尝试通过订阅 http 响应来解决您的问题。 Angular 6 似乎在大量使用 Observables，如果您可以根据需要更改代码，我认为研究 Observables 是一项不错的投资。

标签： angular typescript observable reactivex

【解决方案1】：

这是因为在 JavaScript 中不会等到响应返回。在响应之后返回行为中的某些内容是没有意义的

我认为你应该将你的列表保存在一个属性中，并在你的组件或你想使用它的地方使用它。

public users: Users = undefined

public getUsers() {
    let responseValue = this.http.get(this.utils.provideserviceURL('http://test.com/users'));

    responseValue.toPromise()
    .then(result => {
      let usersList: User[] = [];
      let jsonResult = result.json();
      for (let temp of jsonResult) {
        let tempUser = new User(jsonResult.id, jsonResult.username, jsonResult.password, jsonResult.firstName, jsonResult.lastName);
        usersList.push(tempUser);
      }
      console.log(usersList);
      this.users = usersList;
    })
    .catch(err => {
      // Error while fetching Users
      console.log('Error');
    });

  }

【讨论】：

【解决方案2】：

这就是我的做法（我看到 toPromise 已贬值），

constructor(private dataservice: DataService){}

myEmail: string = '';
myID: number = 0;

ngOnInit(){
this.dataservice.getMe()
.subscribe((data: WhoAmI) => {
  this.myEmail = data.Contacts.find(x=>x.ContactTypeName == "Email").ContactValue;
  this.myID = data.ID;
});

【讨论】：