SuperAPI AI 工具集

sync-construction-async-property-ui-render-gate-pattern

前端与建站

查看项目

更新于 10-16 05:07

技能介绍

用途:解决异步客户端初始化的导出难题。当客户端需要异步初始化(IndexedDB、服务端连接、文件系统),但模块又需要在不加 await 的情况下被导入时,采用此模式。

主要能力:构造保持同步,异步初始化在后台进行,并通过对象上的 whenSynced 属性追踪,需要时再 await。同步方法可立即调用,无需每个调用点都 await。

UI 渲染门:在 Svelte 根布局用 {#await client.whenSynced} 做一次门控,加载态用 @epicenter/ui/spinner,错误态用 @epicenter/ui/empty。门控保证子组件脚本运行时异步工作已完成,子组件可同步访问。务必包含 {:catch},避免失败时无限转圈。

实现:withCapabilities() 把异步工作挂到同步构造的对象上:export const client = createClient().withCapabilities({ persistence: (state) => loadFromIndexedDB(state) });。

替代方案:若每个方法本身都是异步的,可省去 whenSynced,把 await 隐藏在方法内部(如 idb 的 await-in-every-method 写法)。

适用场景:需要模块级导出的客户端、希望 UI 同步访问客户端的组件、SvelteKit 应用中的就绪门控,以及 Yjs 生态的 y-indexeddb 等实践。

限制:具体错误处理与回退细节需自行设计;文中未提供完整 API 行为、性能数据或平台适用范围,须结合实际实现验证。