https://alpinejs.dev/advanced/async
Intenté según la URL anterior y no apareció nada.
¿Dónde está el problema?
<script defer src="https://unpkg.com/alpinejs@3.9.3/dist/cdn.min.js"></script> <!-- 〇 --> <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1> <!-- × --> <span x-text="getLabel()"></span> <script> function getLabel() { return 'Hello World!' } </script> <!-- × --> <span x-text="await getLabel()"></span> <script> async function getLabel() { let response = await fetch('...') return await response.text() } </script>La documentación de Alpine.js omite esta información en los capítulos avanzados porque asume que el lector ya está familiarizado con los conceptos básicos en ese punto. Por lo tanto, siempre debe tener una directiva x-data para activar un componente Alpine.js. Si no tiene ningún dato reactivo, simplemente use un atributo x-data vacío en el elemento (o cualquier elemento principal).
<span x-data x-text="await getLabel()"></span> <script> async function getLabel() { let response = await fetch('...') return await response.text() } </script>