angular 4 http 之web api 服务

Angular Http是获取和保存数据的。主要是为了取到我json文件里的数据。

直接上代码吧：

1.  先介绍Promise模式的：（直接代码）

heroes.json：

1 2 3 4 5 6 7 8

{   "data": [     { "id": 1, "name": "Windstorm" },     { "id": 2, "name": "Bombasto" },     { "id": 3, "name": "Magneta" },     { "id": 4, "name": "Tornado" }   ] }

http肯定是要有服务的，下面先看service的代码： hero.service.promise.ts:

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

主要是提供了一个getHeroes ()方法：
下面看hero.component.promise.ts里面怎么用呢：

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

当然得定义一个hero.ts类：

1 2 3 4 5

export class Hero {   constructor(     public id: number,     public name: string) { } }

接下来看一下我们的hero.compoennt.html写什么呢？

1 2 3 4 5

<h1>Tour of Heroes ({{mode}})</h1> <h3>Heroes:</h3> <ul>   <li *ngFor="let hero of heroes">{{hero.name}}</li> </ul>

就是这么简单。

然后我们在app.compoennt.ts里面引入我们的标签：

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

现在最关键的就是在Module.ts中如何配置

1 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.第二种是web api形式。
有一个文件hero-data.ts(这里就不需要heroes.json文件了)

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

module.ts需要这样配置：加上：

1 2 3 4 5

import { InMemoryWebApiModule }     from 'angular-in-memory-web-api'; import { HeroData }                 from './hero-data'; imports:[  InMemoryWebApiModule.forRoot(HeroData); ]

hero.service.promise.ts里面需要修改下路径就可以。这要修改服务即可，其他的代码勿改动。

1	private heroesUrl = 'api/heroes';

这里已经和heroes.json是没有任何关系了。api是指web api在module.ts里面配置的。angular-in-memory-web-api
heroes是hero-data.ts 里面return 回来的heroes。
这两种得到的结果其实是一样的。
下面说说Observable模式的： 使用都是一样的。
只是服务里的这处代码不一样：
  promise模式：

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

引入的包是这几个：

1	import 'rxjs/add/operator/toPromise';

而Observable模式是这样算的：

1 2 3 4 5

getHeroes(): Observable<Hero[]> {   return this.http.get(this.heroesUrl)                   .map(this.extractData)                   .catch(this.handleError); }

引入：

1 2 3

import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map';

然后就一样了

实际证明直接取Json数据比用web api 快多了