Question

我需要在Angular 2中模拟服务器的长响应以用于教育目的。我有代码

getTasks() : Observable<Task[]> {
    return this.http.get('data/tasks.json').map(response =>  {
        return response.json();
    });
}

// using 
getTasks().subscribe(groups => {
   this.tasks = groups;
});

并且需要服务器响应至少1秒。在Angular 1.5中，我以这种方式做到了这一点

 this.getTasks = function () {
    return $http.get("data/tasks.json").then(function (response) {
        return $timeout(function () {
            return response.data;
        }, 1000);
    };
}

根据此post我在Angular 2中尝试过

getTasks() : Observable<Task[]> {
    return this.http.get('data/tasks.json').map(response =>  {            
        return Observable.of(response.json()).delay(1000);
    });
}

和

getTasks() : Observable<Task[]> {
    return this.http.get('data/tasks.json').map(response =>  {
       return Observable.create((obs: Observable<Task[]>) => {
            obs.next(response.json());
            obs.complete();
       ).delay(1000);        
    });
}

但是有TypeScript编译错误或getTasks().subscribe获取和Observable而不是任务集合。看起来我错过了什么。请帮忙。谢谢。

Answer 1

错误是由于类型不匹配引起的。您的getTasks方法声明返回类型Observable<Task[]>但是map方法返回一个observable而不是一个数组（类型为Task []）。您只需要像往常一样返回observable，然后添加延迟方法来延迟可观察的发射。

getTasks() : Observable<Task[]> {
    return this.http.get('data/tasks.json').map(response =>  {
       return response.json();  
    })
    .delay(1000);
}

在Angular 2中模拟长响应

1 个答案: