Question

我有一个组件，在ngOnInit() - 方法中我调用一个从服务器加载JSON并将数据保存在局部变量中的函数，在下一行我读出局部变量并运行用它。

以下是代码：

export class TasksComponent implements OnInit {

    private tasksJSON = {};



    constructor(private router: Router, private variables: Variables, private apiService: ApiService) {
        if (!this.variables.getIsLoggedIn()) {
            this.router.navigate(['login']);
        }
    }

    ngOnInit() {
        this.getTasks();
        console.log("log 1:" + JSON.stringify(this.tasksJSON));
        let tasks = this.tasksJSON.tasks;
        this.tasksJSON = Object.keys(tasks).map(function(k) { return tasks[k] });
        console.log("log 2:" + this.tasksJSON);
    }

    getTasks() {
        this.apiService.getTasks().
            subscribe(
            data => this.tasksJSON = data,
            //error => this.error = <any>error,
            error => this.variables.setFailure(error),
            () => console.log('log getTasks():' + JSON.stringify(this.tasksJSON)
        );
    }
}

问题是显然let tasks = this.tasksJSON.tasks;开始时数据没有加载，所以我收到错误。

日志如下：

log 1:{}
EXCEPTION: Uncaught (in promise): TypeError: can't convert undefined to object
log getTasks():{"tasks":{"epg":[{"name":"EPGStart"},{"name":"EPGStop"},{"name":"AutoTimer"},{"name":"CleanupDB"},{"name":"RefreshDB"},{"name":"ClearRecordingStats"},{"name":"CleanupRefreshDB"}],"media":[{"name":"UpdateVideoDB"},{"name":"RebuildVideoDB"},{"name":"RebuildAudioDB"},{"name":"RebuildPhotoDB"},{"name":"ClearAudioStats"},{"name":"ClearVideoStats"},{"name":"ClearPhotoStats"}],"system":[{"name":"Hibernate"},{"name":"Standby"},{"name":"Shutdown"}]}}

apiService看起来像这样：

export class ApiService {

private localURL = '../app/apiFiles/';
getTasks() {
        return this.http.get(this.localURL + 'tasks.json')
            .map((res: Response) => res.json())
            .catch(this.handleError);
    }
}

如何解决，let tasks = this.tasksJSON.tasks;在数据加载完成后启动？

编辑：添加了api-Service

Answer 1

你的getTasks（）方法应该返回一个promise。

然后你可以......

this.getTasks().then((returnValueOfGetTasks) => {
    // Following code needs changing to use returnValueOfGetTasks
    console.log("log 1:" + JSON.stringify(this.tasksJSON));
    let tasks = this.tasksJSON.tasks;
    this.tasksJSON = Object.keys(tasks).map(function(k) { return tasks[k] });
    console.log("log 2:" + this.tasksJSON);
}).catch((err) => {
    // todo: handle err
});

当解析promise时，将调用then方法。

您可以使用RxJS提供的promises或Observable。

Observables基本上是承诺的流。例如可观察的订阅方法类似于promise then方法，但每次流发出时都可以多次调用subscribe方法。

今天这是标准的异步JS编程。异步编程基本上是处理不会立即发生的事情。例如HTTP请求需要时间来响应。

在开始另一个之前完成操作

1 个答案: