数据获取 — $mol

数据获取

在 $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() 会把请求发给一个 mock 而不是网络，组件本身一行都不用改。

测试展示了那个 mock。

渲染结果

把解析后的数据直接绑定到列表中：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 上编辑此页这有帮助吗？是否上一页故障排查下一页数据模式本页内容异步属性渲染结果重新加载错误下一步