Resources APIでシグナルを使った非同期データの管理

リンクされたシグナルで状態を派生させる方法を学んだところで、Resource APIを使って非同期データを処理する方法を探ってみましょう。Resource APIは、組み込みのローディング状態、エラー処理、リクエスト管理を備え、シグナルを使って非同期操作を管理する強力な方法を提供します。

このアクティビティでは、resource()関数を使ってデータを非同期にロードする方法と、Resource APIの動作を示すユーザープロファイルローダーを構築することで、非同期操作のさまざまな状態を処理する方法を学びます。

  1. resource関数とAPIをインポートする

    既存のインポートにresourceを追加し、フェイクAPI関数をインポートします。

    // Add resource to existing importsimport {Component, signal, computed, resource, ChangeDetectionStrategy} from '@angular/core';// Import mock API functionimport {loadUser} from './user-api';

  2. ユーザーデータ用のリソースを作成する

    ユーザーIDシグナルに基づいてユーザーデータをロードするリソースを作成するプロパティをコンポーネントクラスに追加します。

    userId = signal(1);userResource = resource({  params: () => ({id: this.userId()}),  loader: (params) => loadUser(params.params.id),});

  3. リソースと対話するメソッドを追加する

    ユーザーIDを変更し、リソースをリロードするメソッドを追加します。

    loadUser(id: number) {  this.userId.set(id);}reloadUser() {  this.userResource.reload();}

    paramsシグナルを変更すると自動的にリロードがトリガーされます。または、reload()を使って手動でリロードできます。

  4. リソースの状態用の算出シグナルを作成する

    リソースの異なる状態にアクセスするための算出シグナルを追加します。

    isLoading = computed(() => this.userResource.status() === 'loading');hasError = computed(() => this.userResource.status() === 'error');

    リソースは、'loading'、'success'、または'error'になり得るstatus()シグナル、ロードされたデータ用のvalue()シグナル、そしてデータが利用可能かどうかを安全にチェックするhasValue()メソッドを提供します。

  5. ボタンを接続し、リソースの状態を表示する

    テンプレート構造はすでに提供されています。すべてを接続しましょう。

    Part 1. ボタンにクリックハンドラーを追加します。

    <button (click)="loadUser(1)">Load User 1</button><button (click)="loadUser(2)">Load User 2</button><button (click)="loadUser(999)">Load Invalid User</button><button (click)="reloadUser()">Reload</button>

    Part 2. プレースホルダーをリソースの状態処理に置き換えます。

    @if (isLoading()) {  <p>Loading user...</p>} @else if (hasError()) {  <p class="error">Error: {{ userResource.error()?.message }}</p>} @else if (userResource.hasValue()) {  <div class="user-info">    <h3>{{ userResource.value().name }}</h3>    <p>{{ userResource.value().email }}</p>  </div>}

    リソースは、その状態をチェックするためのさまざまなメソッドを提供します。

    • isLoading() - データフェッチ中にtrue
    • hasError() - エラー発生時にtrue
    • userResource.hasValue() - データが利用可能な場合にtrue
    • userResource.value() - ロードされたデータにアクセス
    • userResource.error() - エラー情報にアクセス

すばらしい！これでResource APIをシグナルと組み合わせて使う方法を学びました。覚えておくべき重要な概念は次のとおりです。

  • リソースはリアクティブです: パラメータが変更されると自動的にリロードされます
  • 組み込みの状態管理: リソースはstatus()、value()、error()シグナルを提供します
  • 自動クリーンアップ: リソースはリクエストのキャンセルとクリーンアップを自動的に処理します
  • 手動制御: 必要に応じて手動でリロードしたり、リクエストを中止したりできます

次のレッスンでは、入力シグナルでコンポーネントにデータを渡す方法を学びます！