Angular7 + Bootstrap4でWebアプリを作ろう - サービスその2 HTTP通信。
こんにちはふるてつです。
今日は Angular です
前回の社内もくもく会でモックサービスを作りました。
そして今回はそれを HTTP 通信で取得するように変えました。
サーバ側は先日環境を作った Spring Boot にしています。
まずは定数を格納するクラスを作る所から始めます。
appConstクラスを追加
まずはサーバのURLなど固定値専用のクラスを作ります。下記の CLI コマンドで作ります。
固定値だけなのであとでテストファイル 「xxx.spec.ts」 は消しました。
ng generate class appConst
① AppConst クラスにローカルで実行するときのサーバURLを追加します。
② HTTP 接続する際に、クロスオリジン制約にかからないようプリフライトリクエストを送る必要があります。
プレフライトリクエスト用の HTTP オプションを一ヶ所に持ち、各サービスで使いまわします。
プレフライトリクエストについてはこちらが分かりやすいかもですhttps://qiita.com/rooooomania/items/4d0f6275372f413765de
○ appConst クラスの内容
import { HttpHeaders } from '@angular/common/http';
export class AppConst {
// サーバー URL
static readonly URL_DEV_SERVER = 'http://localhost:8080/api/';
// HTTP オプション（プレフライトリクエスト）
static readonly httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
}
information サービスの修整
information サービスは下記のように修正しました。
① AppConst クラスからローカルテスト用のサーバURLを取得して private 変数で持つ。
② api のエンドポイント名を private 変数で持つ "informations"
③コンストラクタの引数に private http: HttpClient を追加して、HTTP CLIENTをインジェクトする。
④あとは最後の行で Spring Boot に HTTP通信して json データを取得する。
http はコンストラクタでインジェクトしているので、this で呼び出せる。
this.http.get<Information[]>() メソッドの第2引数には
先ほど作ったプリフライトリクエスト用のHTTP オプションを渡す。
○ information サービスクラスの内容
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Information } from 'src/app/entity/domain/information';
import { environment } from '../../../environments/environment';
import { AppConst } from '../../app-const';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class InformationService {
private server = environment.production ? AppConst.URL_PROD_SERVER : AppConst.URL_DEV_SERVER;
private webApiUrl = 'informations';
constructor(private http: HttpClient) { }
getInformations(): Observable<Information[]> {
console.log(this.server + this.webApiUrl);
return this.http.get<Information[]>(this.server + this.webApiUrl, AppConst.httpOptions);
}
}
Spring Boot の設定
Spring Boot のコントローラに対し、クロスオリジンを許すようにします。
○ Spring Boot のコントローラ内容
@CrossOriginアノテーションをコントローラにつけてクロスオリジンを許可します。
@RestController
@RequestMapping("api/informations")
@CrossOrigin
public class InformationRestController {
@GetMapping
public List<InformationDto> getInformations(){
return informationService.searchAll();
}
}
Spring Bootの設定を変えてクロスオリジンを許すようにしました。
これで準備完了です。
あとは Angular と Spring Boot を共に起動して HTTP 通信でデータの疎通を確認して終わりました。
今日の感想
今日はモックでなく、HTTPで実際に通信してデータを取得するようにしてみました
これでやっと Angular を動かしている気になってきました。
当面はこれで行こうかと思います。
しかしチュートリアルと比較するとエラー時のハンドリングが足りないようです。
チュートリアルではサービスで http.get メソッドを動かした後、
observable の結果を pipe() で拡張して、それを catchError() オペレーターに渡してますねぇ。
通信に失敗した時など必要そうなので、最終的にはその形にリファクタリングしたいと思いました。
では、お疲れ様でした。
