Does AlpineJS support awaiting asynchronous functions in x-init?
0 reputation · 22 Oct 2024, 22:57 UTC
AlpineJS allows the x-init directive to execute logic when a component initializes. However, the framework currently invokes these functions synchronously. If an async function is passed to x-init, the resulting Promise is treated as fire-and-forget, meaning the component continues its lifecycle without waiting for the asynchronous operation to resolve.
This behavior creates uncertainty when the initial state of the UI depends on data fetched during initialization. Since there is no native mechanism to pause rendering or signal completion to the framework, developers must implement manual synchronization to prevent the UI from displaying stale or undefined data.
- Which patterns are recommended to ensure the UI reflects the resolved state of an
async x-init? - Does AlpineJS provide a way to catch unhandled promise rejections occurring within the
x-initlifecycle?