如何使用typescript

时间:2016-12-02 08:40:06

标签: angular typescript async-await http-get

我正在开发angular 2应用程序,因为我实现了从API获取数据的功能。

这是我在service.ts中编写的代码。

  getTodoListApiUrl(): Observable<ISettings>{

    //return  this._http.get(this._UploadControllerUrl)
    //    .map((response: Response) => <Observable<ISettings[]>>response.json())
    //    .do(data =>console.log('todoListAPIUrl :' + JSON.stringify(data)))
    //    .catch(this.handleError);


    return this._http.get(this._UploadControllerUrl)
        .map((response: Response) => <Observable<ISettings>>response.json())
        .do(data => this._settingsService.todoListAPIUrl= data)
        .catch(this.handleError);     
}



getItems(): Observable<ITodoItem[]> {

    //alert(this._settingsService.todoListAPIUrl);
    if (this._settingsService.todoListAPIUrl != null) {

        return this._http.get(this._settingsService.todoListAPIUrl + '/api/ToDoList').map((response: Response) => <ITodoItem[]>response.json())
            .do(data => console.log('All :' + JSON.stringify(data)))
            .catch(this.handleError);

    } else {

    }

} 

app.component.ts

  ngOnInit(): void {

    console.log('App Component In OnInit');

    this._todoListService.getTodoListApiUrl()
        .subscribe(apiUrl => this.apiUrl = apiUrl,
        error => this.error = <any>error);

    //this._environmentTypeService.getTodoListApiUrl()
    //    .subscribe(apiUrl => this.apiUrl = apiUrl,
    //    error => this.error = <any>error);

    //this._environmentTypeService.getEnvironmentType()
    //    .subscribe(environmentType => this.environmentType = environmentType,
    //    error => this.error = <any>error);

}

在上面的代码中,我将API结果的数据存储到某个变量中,例如this._settingsService.todoListAPIUrl = getTodoListApirUrl()方法中的数据。

但是编译器不会等到API给出结果并存储到上面的变量中。它会自动执行下一个方法。

我认为我的上述方法不能等到它给出api的结果。你可以告诉我如何使我的上述方法应该像async / await。

您能否告诉我如何解决上述问题。

-Pradeep

1 个答案:

答案 0 :(得分:0)

请使用作为Observables子集的承诺

示例代码: -

服务层: -

          getHeroes(): Promise<Hero[]> {
                return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data as Hero[])
               .catch(this.handleError);
           }

控制器层: -

         this.heroService.getHeroes().then(heroes => this.heroes = heroes);