詳細ガイド
シグナル

非同期リアクティビティとリソース

IMPORTANT: resourceは実験的です。お試しいただけますが、安定版になる前に変更される可能性があります。

ほとんどのシグナルAPIは同期的です（signal、computed、inputなど）。しかし、アプリケーションは多くの場合、非同期的に利用可能なデータを処理する必要があります。Resourceを使用すると、非同期データをアプリケーションのシグナルベースのコードに組み込むことができます。

Resourceを使用してあらゆる種類の非同期処理を実行できますが、Resourceの最も一般的なユースケースはサーバーからデータを取得することです。以下は、ユーザーデータを取得するためのリソースを作成する例です。

Resourceを作成する最も簡単な方法は、resource関数を使用することです。

      
import {resource, Signal} from '@angular/core';const userId: Signal<string> = getUserId();const userResource = resource({  // リアクティブなリクエスト計算を定義します。  // リクエスト値は、読み取りシグナルが変更されるたびに再計算されます。  request: () => ({id: userId()}),  // データを取得する非同期ローダーを定義します。  // リソースは、`request`値が変更されるたびにこの関数を呼び出します。  loader: ({request}) => fetchUser(request),});// リソースのローダー関数の結果に基づいてcomputedを作成します。const firstName = computed(() => userResource.value().firstName);

resource関数は、2つの主なプロパティであるrequestとloaderを持つResourceOptionsオブジェクトを受け入れます。

requestプロパティは、リクエスト値を生成するリアクティブな計算を定義します。この計算で読み取られるシグナルが変更されるたびに、リソースは新しいリクエスト値を生成します。これはcomputedと同様です。

loaderプロパティはResourceLoaderを定義します。これは、状態を取得する非同期関数です。リソースは、request計算が新しい値を生成するたびにローダーを呼び出し、その値をローダーに渡します。詳細は下記のResourceローダーを参照してください。

Resourceには、ローダーの結果を含むvalueシグナルがあります。

リソースローダー

リソースを作成する際には、ResourceLoaderを指定します。このローダーは、単一のパラメーター（ResourceLoaderParamsオブジェクト）を受け入れ、値を返す非同期関数です。

ResourceLoaderParamsオブジェクトには、request、previous、abortSignalの3つのプロパティが含まれています。

プロパティ 説明
request リソースのrequest計算の値。
previous statusプロパティを含む、前のResourceStatusを持つオブジェクト。
abortSignal AbortSignal。詳細は下記のリクエストの中断を参照してください。

リクエストの中断

リソースが読み込み中の場合にrequest計算が変更されると、リソースは未処理のリクエストを中断します。

ResourceLoaderParams内のabortSignalを使用して、中断されたリクエストに応答できます。例えば、ネイティブのfetch関数はAbortSignalを受け入れます。

      
const userId: Signal<string> = getUserId();const userResource = resource({  request: () => ({id: userId()}),  loader: ({request, abortSignal}): Promise<User> => {    // 与えられた`AbortSignal`がリクエストの中断を示している場合、    // fetchは未処理のHTTPリクエストをキャンセルします。    return fetch(`users/${request.id}`, {signal: abortSignal});  },});

AbortSignalによるリクエストのキャンセルについては、AbortSignal on MDNを参照してください。

再読み込み

reloadメソッドを呼び出すことで、プログラム的にリソースのloaderをトリガーできます。

      
const userId: Signal<string> = getUserId();const userResource = resource({  request: () => ({id: userId()}),  loader: ({request}) => fetchUser(request),});// ...userResource.reload();

undefined リクエスト

undefinedのリクエスト値は、リソースがローダーを実行するのを防ぎ、リソースをIdle状態にします。

リソースの状態

リソースオブジェクトには、非同期ローダーの状態を読み取るためのいくつかのシグナルプロパティがあります。

プロパティ 説明
value リソースの最新の値、または値が受信されていない場合はundefined。
hasValue リソースが値を持っているかどうか。
error リソースのローダーの実行中に発生した最新のエラー、またはエラーが発生していない場合はundefined。
isLoading リソースローダーが現在実行中かどうか。
status 後述のリソースの特定のResourceStatus。

statusシグナルは、リソースの状態を示す特定のResourceStatusを提供します。

ステータス value() 説明
Idle undefined リソースには有効なリクエストがなく、ローダーは実行されていません。
Error undefined ローダーでエラーが発生しました。
Loading undefined request値の変更の結果としてローダーが実行されています。
Reloading 以前の値 リソースのreloadメソッドの呼び出しの結果としてローダーが実行されています。
Resolved 解決された値 ローダーが完了しました。
Local ローカルに設定された値 リソースの値は、.set()または.update()を介してローカルに設定されました。

この状態情報を使用して、ローディングインジケーターやエラーメッセージなどのユーザーインターフェース要素を条件付きで表示できます。