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

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({  // Define a reactive computation.  // The params value recomputes whenever any read signals change.  params: () => ({id: userId()}),  // Define an async loader that retrieves data.  // The resource calls this function every time the `params` value changes.  loader: ({params}) => fetchUser(params),});// Create a computed signal based on the result of the resource's loader function.const firstName = computed(() => userResource.value().firstName);

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

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

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

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

リソースローダー

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

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

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

paramsの計算がundefinedを返す場合、ローダー関数は実行されず、リソースの状態はIdleになります。

リクエストの中断

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

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

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

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

再読み込み

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

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

リソースの状態

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

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

The status signal provides a specific ResourceStatus that describes the state of the resource using a string constant.

Status	`value()`	Description
`'idle'`	`undefined`	The resource has no valid request and the loader has not run.
`'error'`	`undefined`	The loader has encountered an error.
`'loading'`	`undefined`	The loader is running as a result of the `request` value changing.
`'reloading'`	Previous value	The loader is running as a result calling of the resource's `reload` method.
`'resolved'`	Resolved value	The loader has completed.
`'local'`	Locally set value	The resource's value has been set locally via `.set()` or `.update()`

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