javascript - Angular 中的异步函数后返回

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 7 年前。

我正在使用 Angular 和 RxJS 编写项目。我实现了从 JSON 检索数据的可注入(inject)类，如下所示:

import {Injectable, Inject} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

import {Student} from './student.data';

@Injectable()
export class RosterService {
    private students : Student[];
    constructor(@Inject(Http) private http:Http){}

    private getStudents(){
        this.http.get('/JSON/students.json')
            .map(data => data.json().students)
            .subscribe(data => this.students = data);
    }

    public getRoster() {
        this.getStudents();
        return this.students;
    }
}

将 RosterService 注入(inject)到 AppComponent 的构造函数中(包括作为提供者注入(inject)到 @Component 中)之后:

export class AppComponent {
    public students : Student[];
    constructor(private _rosterService : RosterService) {
        this.students = _rosterService.getRoster();
    }
 }

但是当我调用 getRoaster() 方法时，它不会等到执行 getStudents (异步 get 调用)。在结果中我得到了未定义的值。

我该如何处理？感谢您的回复。

Answer 1

我会使用回调函数，例如，如果它是一个 promise ，那么我会使用如下所示的函数。

var data;
asyncCall().then((result:any) => {
data = reuslt;
return data;
});

不确定这是否是您想要的。

更新:

        @Injectable()
    export class RosterService {
        private students : Student[];
        constructor(@Inject(Http) private http:Http){}

        private getStudents(){
            return this.http.get('/JSON/students.json')
                .map(data => data.json().students)
                .subscribe(data => this.students = data);
        }

        public getRoster() {
           return this.getStudents().then (() =>{
    return this.students;
           });        
         }
       }

在你的AppComponent内部

export class AppComponent {
    public students : Student[];
    constructor(private _rosterService : RosterService) {
        this._rosterService.getRoster().then ((data:<T>)=>{
        this.students =data;
     });
    }
 }