Angular 2官方教程-Promise.resolve VS http

在Angular 2的官方教程中，他们使用Promise.resolve（英雄）获得英雄阵列

我尝试遵循Http客户端教程，但遇到了一些问题。我可以发出请求，但是当我导航到其他页面时，它会再次发出get请求。不同的组件使用自己的英雄集

我想知道为什么他们的行为会有所不同。如果我想与服务器通信，并且仍然让组件使用同一组英雄，我应该怎么做

教程实例：（）

我的审判：（）

我的区别在于

（1） Angular官方版本的app/hero.service.ts

import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Injectable } from 'angular2/core';

@Injectable()
export class HeroService {
  getHeroes() {
    return Promise.resolve(HEROES);
  }

  getHero(id: number) {
    return Promise.resolve(HEROES).then(
      heroes => heroes.filter(hero => hero.id === id)[0]
    );
  }
}

import {Http, Response} from 'angular2/http';
import {Headers, RequestOptions} from 'angular2/http';
import {Observable}     from 'rxjs/Observable';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Injectable } from 'angular2/core';

@Injectable()
export class HeroService {
  constructor (private http: Http) {}
  getHeroes() {
    return this.http.get("hero.json")
                    .map(res => <Hero[]> res.json().HEROES)
                    .do(data => console.log(data)) // eyeball results in the console
                    .catch(this.handleError);
  }

    getHero(id: number) {
    return this.http.get("hero.json")
                    .map(res => <Hero> res.json().data.filter(hero => hero.id === id)[0])
                    .do(data => console.log(data)) // eyeball results in the console
                    .catch(this.handleError);
  }
  private handleError (error: any) {
    // in a real world app, we may send the error to some remote logging infrastructure
    // instead of just logging it to the console
    console.error(error);
    return Promise.reject(error.message || error.json().error || 'Server error');
  }

}

（2） app/hero.service.ts的我的版本

import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Injectable } from 'angular2/core';

@Injectable()
export class HeroService {
  getHeroes() {
    return Promise.resolve(HEROES);
  }

  getHero(id: number) {
    return Promise.resolve(HEROES).then(
      heroes => heroes.filter(hero => hero.id === id)[0]
    );
  }
}

import {Http, Response} from 'angular2/http';
import {Headers, RequestOptions} from 'angular2/http';
import {Observable}     from 'rxjs/Observable';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Injectable } from 'angular2/core';

@Injectable()
export class HeroService {
  constructor (private http: Http) {}
  getHeroes() {
    return this.http.get("hero.json")
                    .map(res => <Hero[]> res.json().HEROES)
                    .do(data => console.log(data)) // eyeball results in the console
                    .catch(this.handleError);
  }

    getHero(id: number) {
    return this.http.get("hero.json")
                    .map(res => <Hero> res.json().data.filter(hero => hero.id === id)[0])
                    .do(data => console.log(data)) // eyeball results in the console
                    .catch(this.handleError);
  }
  private handleError (error: any) {
    // in a real world app, we may send the error to some remote logging infrastructure
    // instead of just logging it to the console
    console.error(error);
    return Promise.reject(error.message || error.json().error || 'Server error');
  }

}

从'angular2/Http'导入{Http，Response}；
从'angular2/http'导入{Headers，RequestOptions}；
从“rxjs/Observable”导入{Observable}；
从“/Hero”导入{Hero}；
从“/模拟英雄”导入{英雄}；
从'angular2/core'导入{Injectable}；
@可注射（）
导出类服务{
构造函数（私有http:http）{}
getHeroes（）{
返回此.http.get（“hero.json”）
.map（res=>res.json（）.heros）
.do（data=>console.log（data））//控制台中的眼球结果
.接住（这个.把手错误）；
}
getHero（id:number）{
返回此.http.get（“hero.json”）
.map（res=>res.json（）.data.filter（hero=>hero.id==id）[0]）
.do（data=>console.log（data））//控制台中的眼球结果
.接住（这个.把手错误）；
}
私有句柄错误（错误：任意）{
//在现实世界的应用程序中，我们可能会将错误发送到某些远程日志记录基础设施
//而不仅仅是将其记录到控制台
控制台错误（error）；
return Promise.reject（error.message | | | error.json（）.error | | |“服务器错误”）；
}
}

我想你想要的是：

  getHeroes() {
    if(this.data) {
      return Observable.of(this.data);
    } else {
    return this.http.get("hero.json")
                    .map(res => <Hero[]> res.json().HEROES)
                    .do(data => {
                       console.log(data)) // eyeball results in the console
                       this.data = data;
                     });
                    .catch(this.handleError);
    };
  }

getHeroes（）{
如果（这个数据）{
（此数据）的可观测返回值；
}否则{
返回此.http.get（“hero.json”）
.map（res=>res.json（）.heros）
.do（数据=>{
console.log（data））//控制台中的眼球结果
这个数据=数据；
});
.接住（这个.把手错误）；
};
}

是的，谢谢！我已经更新了链接，它的工作。你能解释更多关于可观测的概念吗？（或者发送入门指南很好）再次感谢

Promise

和

Observable

提供了一个统一的API来处理异步执行（以避免回调地狱）。您可以向Promise传递回调，然后（…）在异步调用（例如对服务器的请求）完成时调用。如果您有一系列事件，希望为每个事件调用回调，

Observable

是一个更好的选择。然后（…）和

Promise

一样，有一长串可以与

Observable

一起使用的各种运算符。请参见示例（Angular2使用RxJS 5）或了解更多详细信息。那里有很多文档。Angular只使用RxJS，并且可以很好地使用它。不过RxJS不是Angular的一部分。