angular 4 http 之web api 服务

2

3

4

5

6

7

8

{

  "data": [

    { "id": 1, "name": "Windstorm" },

    { "id": 2, "name": "Bombasto" },

    { "id": 3, "name": "Magneta" },

    { "id": 4, "name": "Tornado" }

  ]

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

import { Injectable } from ‘@angular/core‘;

import { Http, Response }          from ‘@angular/http‘;

import { Headers, RequestOptions } from ‘@angular/http‘;

import ‘rxjs/add/operator/toPromise‘;

import { Hero } from ‘./hero‘;

@Injectable()

export class HeroService {

//注意这里的路径，找的是app文件下的heroes.json文件

  private heroesUrl = ‘app/heroes.json‘;

  constructor (private http: Http) {}

  getHeroes (): Promise<Hero[]> {

    console.log(this.heroesUrl);

    return this.http.get(this.heroesUrl)

                    .toPromise()

                    .then(this.extractData)

                    .catch(this.handleError);

  }

  private extractData(res: Response) {

    let body = res.json();

    return body.data || { };

  }

  private handleError (error: Response | any) {

    let errMsg: string;

    if (error instanceof Response) {

      const body = error.json() || ‘‘;

      const err = body.error || JSON.stringify(body);

      errMsg = `${error.status} - ${error.statusText || ‘‘} ${err}`;

    } else {

      errMsg = error.message ? error.message : error.toString();

    }

    console.error(errMsg);

    return Promise.reject(errMsg);

  }

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

import { Component, OnInit } from ‘@angular/core‘;

import { Hero }              from ‘./hero‘;

import { HeroService }       from ‘./hero.service.promise‘;

@Component({

  selector: ‘hero-list-promise‘,

  templateUrl: ‘./hero-list.component.html‘,

  providers: [ HeroService ],

  styles: [‘.error {color:red;}‘]

})

export class HeroListPromiseComponent implements OnInit {

  errorMessage: string;

  heroes: Hero[];

  mode = ‘Promise‘;

  constructor (private heroService: HeroService) {}

  ngOnInit() { this.getHeroes(); }

  getHeroes() {

    this.heroService.getHeroes()

                     .then(

                       heroes => this.heroes = heroes,

                       error =>  this.errorMessage = <any>error);

  }

}

2

3

4

5

export class Hero {

  constructor(

    public id: number,

    public name: string) { }

}

2

3

4

5

<h1>Tour of Heroes ({{mode}})</h1>

<h3>Heroes:</h3>

<ul>

  <li *ngFor="let hero of heroes">{{hero.name}}</li>

</ul>

<hero-list-promise></hero-list-promise>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

import { NgModule }      from ‘@angular/core‘;

import { BrowserModule } from ‘@angular/platform-browser‘;

import { FormsModule }   from ‘@angular/forms‘;

import { HttpModule, JsonpModule } from ‘@angular/http‘;

import { AppComponent }             from ‘./app.component‘;

import { HeroListComponent }        from ‘./toh/hero-list.component‘;

import { HeroListPromiseComponent } from ‘./toh/hero-list.component.promise‘;

@NgModule({

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    JsonpModule,

  ],

  declarations: [

    AppComponent,

    HeroListPromiseComponent,

  ],

  bootstrap: [ AppComponent ]

})

export class AppModule {}

2

3

4

5

6

7

8

9

10

11

12

import { InMemoryDbService } from ‘angular-in-memory-web-api‘;

export class HeroData implements InMemoryDbService {

  createDb() {

    let heroes = [

      { id: 1, name: ‘Windstorm‘ },

      { id: 2, name: ‘Bombasto‘ },

      { id: 3, name: ‘Magneta‘ },

      { id: 4, name: ‘Tornado‘ }

    ];

    return {heroes};

  }

}

2

3

4

5

import { InMemoryWebApiModule }     from ‘angular-in-memory-web-api‘;

import { HeroData }                 from ‘./hero-data‘;

imports:[

 InMemoryWebApiModule.forRoot(HeroData);

]

private heroesUrl = ‘api/heroes‘;

2

3

4

5

6

7

getHeroes (): Promise<Hero[]> {

  console.log(this.heroesUrl);

  return this.http.get(this.heroesUrl)

                  .toPromise()

                  .then(this.extractData)

                  .catch(this.handleError);

}

import ‘rxjs/add/operator/toPromise‘;

2

3

4

5

getHeroes(): Observable<Hero[]> {

  return this.http.get(this.heroesUrl)

                  .map(this.extractData)

                  .catch(this.handleError);

}

2

3

import { Observable } from ‘rxjs/Observable‘;

import ‘rxjs/add/operator/catch‘;

import ‘rxjs/add/operator/map‘;