issue#13 HTTP

[ChuangPoPO]

In this page, you'll make the following improvements.

• Get the hero data from a server.
• Let users add, edit, and delete hero names.
• Save the changes to the server.

You'll teach the app to make corresponding HTTP calls to a remote server's web API.

[ChuangPoPO]

app.moudule.ts

import { HttpModule } from '@angular/http';
imports : [...]

[ChuangPoPO]

Simulate the web API：InMemoryWebApiModule

in-memory-data.service.ts replace mock-heroes.ts

[ChuangPoPO]

Heroes and HTTP

src/app/hero.service.ts

  import { Injectable }    from '@angular/core';
  import { Headers, Http } from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  import { Hero } from './hero';

  private heroesUrl = 'api/heroes';  // URL to web api
  constructor(private http: Http) { }
  getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data as Hero[])
               .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }

HTTP Promise

• .toPromise 將 Observable 轉為 Promise，但 Observable 本身沒有這功能，所以要 import 'rxjs/add/operator/toPromise';

Extracting the data in the then callback

• .then(response => response.json().data as Hero[]) 用 .then 取得資料，使用 HTTP Response 的 .json() 方法取得資料

Error Handling

• .catch(this.handleError);

Get hero by id

getHero(id: number): Promise<Hero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get(url)
    .toPromise()
    .then(response => response.json().data as Hero)
    .catch(this.handleError);
}

[ChuangPoPO]

in-memory-web-api