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

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

1 个答案: