プログラミング題して「頼りすぎないAngular」ということで、Angularの層をなるべく薄くアプリケーションを作るにはどうすればいいかというのを考えるシリーズです。Angular良さそうなんだけどロックインされて捨てにくそう、という人々向けに、コードのモジュール性とフレームワーク非依存性を重視した実装パターンを試行錯誤します。使ってAngularアプリでAjaxする例を紹介します。axiosはTypeScriptの型定義を同梱していて、インターセプターなどAngularのHttpClientと同じような機能が揃っています。Example今回の完成形はこちらです。Generatorからユーザー情報のJSONを取得し、画面に表示するアプリケーションです。HttpClientさて今回はAngular公式のHttpClientモジュールを使わずフレームワーク非依存のaxiosを使ってHttpClientを作ります。次のようなファイルでアプリケーション用のカスタムインスタンスを生成してexportします。今回は何もしませんが実際はデフォルトのヘッダを追加したりインターセプターを追加したりいろいろすると思います。instance;UserRepository次に、作成したHttpClientを使ってAPI呼び出しを行うためのサービスクラスを作ります。}}作成したサービスクラスをAppModuleに登録します。}AppComponent最後にコンポーネントからサービスを利用します。ここはAngularのDIを使います。}}テンプレートでは名前と写真を表示して、ボタンを押すとchangeUser()メソッドをトリガーするようにしています。User</button>テストとDIサービスクラスのUserRepositoryでは直接httpClientをimportして参照しましたが、AppComponentではDI経由でUserRepositoryを参照しました。この違いは、ユニットテストをどう書くかという観点で分かれています。axiosはmoxiosというパッケージを使うことで簡単にaxiosのインスタンスをモック化できます。そのため、httpClientの初期化のテストにおいても、UserRepositryの振る舞いのテストにおいても、DIは必要ありません。AppComponentからUserRepositoryを直接参照すると、簡単にはモックできません。複数値の返却RxJSの恩恵については、UserRepositoryの層でfromPromise関数などを使ってObservableを返すようにすれば少しだけ解決します。Flux的な設計をするとなるとObservableなのはストアだけで良くて、fetch自体は単発で終わるほうが扱いやすいので特に欠点ではない気もしています。まとめAngularのHttpClientは必須ではないaxiosのようなライブラリを使ってフレームワーク非依存の独自HttpClientを作れるDIするかどうかはテストしやすさを考える次回は未定です。読者になる@laco2netをフォローらこらこファンクラブhttps://www.patreon.com/lacolacoPatreonで支援を受け付けています。(5)月別アーカイブはてなブログをはじめよう!lacolacoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。