Angularを使う：アップ・アンド・ランニング

第9章. AngularでHTTP呼び出しを行う

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前の章では、Angularサービスについての下準備を始めた。 特に、Angularサービスとは何か、どのような時に使うのかを見てきた。その後、Angularサービスの作成とアプリケーションでの使用について説明し、observablesを使用したAngularでの非同期振る舞いをざっと見た。

この章では、そのベースに基づいて、Angularの組み込みモジュールとサービスを使って、サーバへのHTTP呼び出しと解析を行っていく。この章では、一般的なパラダイム、APIオプション、observablesの連鎖の仕方、アプリケーションでobservablesのパワーを実際に使う方法について説明する。

HttpClientの紹介

このセクションでは、AngularのHttpClient 、サーバにGETとPOSTの呼び出しを行う。 このセクションでは、呼び出しができるようにアプリケーションをセットアップする方法、実際に呼び出しを行いレスポンスを処理するプロセス、そしてAPIシグネチャとニーズに合わせて調整するための様々なオプションについて説明する。

サーバに関しては、タイムアウトで構築するのではなく、このアプリケーション用にあらかじめ構築されたサーバを使う。このサーバはNode.jsで、リポジトリで入手可能なので、もっと深く知りたいと思うかもしれないが、この本のこの部分を理解するのに必要なものではない。

HttpClientとHttpの比較

もし古いチュートリアルやサンプルを見たなら、HTTP呼び出しの方法が少し違っているかもしれない。 @angular/httpから直接インポートして呼び出す。これは、Angularのバージョン4.3でHttpClient が導入される前の、AngularでHTTPを扱う旧来の方法だった。Angularのバージョン5では、旧バージョンのhttp サービスは廃止され、HttpClient が採用された。

アプリケーションの開発を続け、これまで使っていたモック・データではなく、実際のサーバと通信できるようにしてみる。特にこのセクションでは、3つのサービス呼び出し（銘柄リストの取得、銘柄の作成、銘柄レベルでのお気に入りの切り替え）をHTTP GET/POSTを使ったサーバ呼び出しに切り替える。このセクションが終わるころには、クライアント側でモック・データを操作することはなくなっているはずだ。

サーバ設定

前述したように、これから使うサーバはすでに開発済みで、リポジトリ のchapter9/serverフォルダにある。ウェブ開発を始める前に、サーバを立ち上げて動かしてみよう。

GitHubリポジトリにあるchapter9/serverフォルダをチェックアウトしてブラウズする。そのフォルダ内から、ターミナルで以下のコマンドを実行する：

npm i
node index.js

これで、Node.jsサーバーに必要な依存関係をすべて 、ポート3000でサーバーを起動する。このサーバはバックグラウンドで稼動させておく。このサーバーは、私たちのアプリケーションが株式を取得し、保存するために使用する。

警告

これはインメモリ・データストアの非常に単純化されたサーバであることに注意してほしい。作成したり保存したりしたものは、サーバを再起動するとリセットされる。 ...