はじめてのAngular TODOアプリをつくる④ HTTP編

どうも、イイオです。
AngularでTODOアプリ的なものを作ってみようシリーズ、
チュートリアルでいうとこの辺りを見つつ、通信の部分やってきます。

前回まで一体何をやっていたんだ？漢は過去に拘泥しない。

目標

今回のゴールは「HTTP通信してWebAPIを呼び出し、データのやり取りを行う」ことです。
でその際に
チュートリアルではObservableに包まれて来るレスポンスを.toPromise()でPromiseに変換してるけど
Observableをそのまま使うのがゴーリストではスタンダードっぽいのでそれに準じてます。

やること

InMemoryWebApiModuleを使ってAPIサーバ風にふるまってもらう準備
Observableを使ってHTTP通信する

1. InMemoryWebApiModuleを使ってAPIサーバ風にふるまってもらう準備

Webサーバのシミュレーションしてくれる機構が用意されています。

なぜか入ってなかったのでnpmで取ってきた

npm install angular-in-memory-web-api@latest

angular2の場合はangular2-in-memory-web-apiかもしれない

DBのふりするサービスを作成

ng g service in-memory-data

mock-tasks.tsからモックデータをコピってきて中身はこんなかんじに

in-memory-data.service.ts

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';

@Injectable()
export class InMemoryDataService implements InMemoryDbService {

  constructor() { }

  public createDb() {
    const tasks = [
      { id: 0, name: '', importance: 'high', isDone: false },
      { id: 11, name: '企画ロードマップ作成', importance: 'high', isDone: false },
      { id: 12, name: '山田さんにメール返信', importance: 'high', isDone: false },
      { id: 13, name: 'Angular2キャッチアップ', importance: 'mid', isDone: false },
      { id: 14, name: 'ブログ更新', importance: 'low', isDone: false },
      { id: 15, name: '新卒技術研修', importance: 'low', isDone: false }
    ];
    return tasks;
  }

}

でhttp://localhost:4200/api/tasksをエンドポイントにGETすると
Response.json().dataでこの配列が返って来る。なんでか知らないけど返って来る。
わからなくても使えればいいんだなあ　いいを

このサービスをapp.module.tsに登録して使えるようにする

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';
・・・
@NgModule({
  imports: [
    ・・・
    InMemoryWebApiModule.forRoot(InMemoryDataService),
  ],
  ・・・
})

2. Observableを使ってhttp通信する

とりあえず全データ取得するやつをちゃんと動くようにしてみようかと。
前々回くらいに作ったTaskサービスを書き換えます。

task.service.ts

import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';

@Injectable()
export class TaskService {
  private headers: Headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http) { }

  public getTasks(): Observable<Task[]> {
    const url = 'api/tasks';
    return this.http.get(url, {headers: this.headers})
      .switchMap((response: Response) => {
        return Task.toTasks(response.json().data); // チュートリアルみたいに as Task[] ではキャストできなかった
      })
      .catch((error) => {
        throw new Error(error); // なんかエラー出たら呼び出し元の方でで受け取ってもらう
      });
  }
  
}

そうしてObservableにくるんだオブジェクトを呼び出し元に返してあげる。
呼び出し元ではObservableで返ってきたオブジェクトをsubscribeしたら使える状態になります。

export class TasksComponent implements OnInit {
  private tasks: Task[];

  constructor(private taskService: TaskService) { }

  ngOnInit() {
    this.getTasks();
  }

  private getTasks(): void {
    this.taskService.getTasks()
      .subscribe(
        (retTasks: Task[]) => {
          console.log(retTasks);
          this.tasks = retTasks;
        },
        (error: any) => {
          console.log(error);
        }
      );
  }

}