17. HttpClient — APIとの通信

サーバーのAPIからデータを取得するには HttpClient を使います。アプリ起動時の providers に provideHttpClient() を追加したうえで、コンポーネントやサービスで inject(HttpClient) して this.http.get<User[]>('/api/users') のように呼び出します。レスポンスは subscribe で受け取り、届いたデータを状態に反映します。

実務のフロントエンド開発は「APIからデータを取ってきて画面に表示する」ことの繰り返しなので、HttpClientは最もよく触るAPIのひとつです。get<User[]>() のように型引数を付けておくと、レスポンスのプロパティ名の打ち間違いをコンパイル時に見つけられます。

通信は時間がかかる非同期処理なので、結果はsubscribeのコールバックの中でしか使えません。subscribeの外で値を読もうとして「データが空のまま」になるのは、初心者が最初につまずく定番ポイントです。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';

type User = { id: number; name: string };

@Component({
  selector: 'app-user-list',
  template:
    '@for (user of users(); track user.id) { <p>{{ user.name }}</p> }',
})
export class UserListComponent {
  private http = inject(HttpClient);
  users = signal<User[]>([]);

  ngOnInit() {
    // GETリクエストを送り、届いたデータをシグナルに反映する
    this.http.get<User[]>('/api/users').subscribe((data) => {
      this.users.set(data);
    });
  }
}

公式ドキュメントで詳しく ↗