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

Question

在 Angular 2 的官方教程中，他们使用 Promise.resolve(HEROES) 来获取 HEROES 数组。

我尝试按照 Http 客户端教程进行操作，但遇到了一些问题。我可以发出请求，但是当我导航到其他页面时，它会再次发出获取请求。不同的组件正在使用自己的一组 HEROES。

我想知道为什么他们会有不同的行为。如果我想与服务器通信并仍然使组件使用同一组 HEROES，我该怎么办？

教程实例:( https://angular.io/resources/live-examples/toh-5/ts/plnkr.html )

我的试用:( http://plnkr.co/edit/mPgpt2snK2OY6o8sq6YK?p=preview )

我的与众不同之处在于......

(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]
    );
  }
}

(2) 我的 app/hero.service.ts 版本

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');
  }

}

Answer 1

我猜你想要这样的东西:

  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);
    };
  }