Angular 4 HTTP Web API service

Angular HTTP is to get and save data. The main purpose is to fetch data from my JSON file.

Directly on the code bar:

1. First introduce the Promise mode: (direct code)

Heroes.json:

12345678

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

http is sure to have a service, the following first look at the service code: hero.service.promise.ts:

12345678910111213141516171819202122232425262728293031323334

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

The main is to provide a getheroes () method:
Here's how it's used in Hero.component.promise.ts:

1234567891011121314151617181920212223

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

Of course you have to define a Hero.ts class:

12345

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

now, what do you think our hero.compoennt.html wrote?

12345

< h1 >tour of Heroes ({{mode}}) </ h1 > < h3 >heroes:</ h3 > < ul > &NBSP;&NBSP; < li *ngfor= "Let Hero of Heroes" >{{hero.name}}</ li > </ ul >

It 's that simple.

Then we introduce our tags in the app.compoennt.ts:

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

The key now is how to configure the Module.ts in the

123456789101112131415161718192021222324

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 {}

The simplest and most common configuration, as usual.

2. The second type is Web API.
There is a file hero-data.ts (there is no need for Heroes.json files here)

123456789101112

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 need this configuration: Plus:

12345

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

Hero.service.promise.ts inside need to modify the next path can be. This is to modify the service, the other code do not change.

1	private heroesUrl = ‘api/heroes‘;

There is no relationship with Heroes.json. API is the Web API configured in Module.ts. Angular-in-memory-web-api
Heroes is the return of the heroes inside Hero-data.ts.
These two kinds of results are actually the same.
Let's talk about the observable mode: use is the same.
It's just that the code in the service is different:
  Promise Mode:

1234567

getheroes (): promise< hero []> { &NBSP;&NBSP; Console.log (This.heroesurl); &NBSP;&NBSP; return this.http.get (This.heroesurl)                     .topromise ()                     Code class= "HTML Plain" >.then (this.extractdata)                     . catch (This.handleerror); }

The introduction of the package is these few:

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

The observable pattern is calculated as follows:

12345

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

Introduced:

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

And then it's the same.

Actually proving that fetching JSON data directly is much faster than using the Web API.

Angular 4 HTTP Web API service