在 Angular 2 中模拟长响应答案

【问题标题】：Simulate long response in Angular 2在 Angular 2 中模拟长响应
【发布时间】：2018-06-08 10:45:03
【问题描述】：

出于教育目的，我需要在 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);
    };
}

在 Angular 2 中根据 post 我试过了

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 而不是任务集合。看来我错过了什么。请帮忙。谢谢你。

【问题讨论】：

标签： angular typescript rxjs observable

【解决方案1】：

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

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

【讨论】：