javascript - 如何仅在可用时使用提供商发送的数据？

Question

我有一个从 JSON 读取数据的提供程序，我希望它将数据发送到页面。 为了确保数据很好地发送到用户界面，我有一个 console.log 应该显示数组的第一个元素，但问题是我不知道如何仅在信息出现后调用此 console.log已被提供者检索并传递。 当然，目的不是console.log，而是在数据由提供者传递后对其进行实际操作。

提供者:

getWorldCities(){
    if (this.worldCities) {
  // already loaded data
  return Promise.resolve(this.worldCities);
}
    this.http.get('../assets/city.list.json')
      .map(res => res.json()).subscribe(data => {
        console.log(data.status);
        console.log(data);
        console.log(data.headers);
        this.worldCities = data;
        return Promise.resolve(this.worldCities);
      },
      err => console.log(err),
      () => console.log('yay')
    )
  }

}

在我的页面中:

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChooseCity');
    console.log(this.worldCities);
    this.AppCitiesProvider.getWorldCities().then(data => {
      this.worldCities = data;
      console.log(this.worldCities[0]);
    });
  }

我得到的错误是:

Cannot read property 'then' of undefined

我应该如何正确地做到这一点？

Answer 1

在收到数据后检索数据并执行操作的“最佳实践”是使用 Observable 而不是 Promise。像这样的事情:

在服务中:

getMovies(): Observable<IMovie[]> {
    return this.http.get<IMovie[]>(this.moviesUrl)
        .do(data => console.log(JSON.stringify(data)))
        .catch(this.handleError);
}

handleError(error) {
  // Your error handling here.
  console.error(error);
}

在组件中:

ngOnInit(): void {
    this.movieService.getMovies()
        .subscribe(
            (movies: IMovie[]) => { 
                this.movies = movies;
                this.filteredMovies = this.performFilter(this.listFilter);
            },
            (error: any) => this.errorMessage = <any>error);
}

订阅的第一个回调函数中的任何代码只会在检索数据后执行。

请参阅此了解更多信息(和图片!)Subscribe to observable is returning undefined