データ取得

$mol でリモートデータを読み込むのは特別な API ではありません——非同期な値は、あたかも応答がすでにそこにあるかのように書かれた、ただのリアクティブなプロパティです。ビューはそれを待ち、読み込み状態を表示し、データが届いたときに再描画します。

非同期なプロパティ

@ $mol_mem の中でネットワークを呼び、パースされた結果を返します。コードに promise も await もコールバックもありません。1namespace $.$$ {2 export class $my_users extends $.$my_users {3 @ $mol_mem4 users() {5 return this.$.$mol_fetch.json( 'https://api.example.com/users' ) as {6 id: number7 name: string8 }[]9 }10 }11}$mol_fetch は応答が届くまでファイバーを中断し、そのあと計算がやり直されて users() が配列を返します。保留の間、users() を読むどのビューも組み込みの読み込み状態を自動的に表示します——isLoading フラグは書きません。@ $mol_mem から自分で promise を返してはいけません。値として格納された promise はセルを永久に読み込み状態に留めます。

トラブルシューティングを参照してください。this.$ はコンポーネントのコンテキストです。サービスはすべてそこを通ります。ネットワークなら $mol_fetch、URL なら $mol_state_arg、時間なら $mol_after_timeout。テストではコンテキストが差し替えられるので、コンポーネントを一行も変えずに、同じ users() がネットワークではなくモックへリクエストを送ります。そのモックは

テストで示します。

結果の描画

解決したデータをそのままリストに束ねます。1 @ $mol_mem2 user_names() {3 return this.users().map( user => user.name )4 }応答が届くと users() が更新され、user_names() が再計算され、リストが描画されます。コールバックも useEffect もありません。

再読み込み

それはただのリアクティブなセルなので、無効化することで再取得します。増やせるトークンに依存します。1 @ $mol_mem2 reload_token( next?: number ) {3 return next ?? 04 }5 6 @ $mol_mem7 users() {8 this.reload_token() // subscribe9 return this.$.$mol_fetch.json( 'https://api.example.com/users' ) as unknown[]10 }11 12 @ $mol_action13 reload() {14 this.reload_token( this.reload_token() + 1 )15 }GitHub でこのページを編集役に立ちましたか？はいいいえ前へトラブルシューティング次へデータスキーマこのページの内容非同期なプロパティ結果の描画再読み込みエラー次へ