Una característica muy admirada de HTMX entre los principiantes es su capacidad para abstraer javascript y realizar solicitudes de recuperación desde el backend directamente en el marcado.
No me gusta HTMX porque creo que es realmente limitante, me encanta Alpine y no me gusta usar múltiples marcos, pero me gustaría tener la posibilidad de hacer una solicitud simple de mi backend para completar un elemento en mi dom desde dentro de Alpine sin llamar específicamente a una función para hacer eso.
Creé esta funcionalidad usando una función simple que llamé xfetch en el ejemplo a continuación, que simplemente pasa una URL y devuelve el elemento relevante en x-text, x-html o variable en x-data. Se puede utilizar en alpino de la siguiente manera:
<div x-data> <span x-text="await xfetch("url")> </div>Creo que implementar esto de una manera sencilla, sin entrar en los detalles de las promesas, etc., sería realmente útil para los principiantes que comienzan con Alpine como su primer marco JS.
Idealmente, haría de esto una magia alpina llamada $fetch , pero no puedo encontrar la manera de hacer que la magia funcione bien con async y await.
Mi código actual es el siguiente:
<html lang="en"> <head> <script defer src="https://unpkg.com/alpinejs@3.xx/dist/cdn.min.js"></script> </head> <body> <div x-data="{ time: xfetch('http://date.jsontest.com', method = 'GET', jsonItem='time') }"> <p> This pulls the time from an object in x-data: <span x-text="await time"></span> </p> <p> ... but you can also pass a url right into the x-text: <span x-text="await xfetch('http://date.jsontest.com', method = 'GET', jsonItem='date')"> </span> </p> </div> <script> async function xfetch(url, method='GET', jsonItem=null) { return fetch(url, { method: method, }) .then((response) => response.json()) .then((responseJson) => { return responseJson[jsonItem] }); } </script> </body> </html>Lo ideal sería agregar:
document.addEventListener('alpine:init', () => { Alpine.magic('fetch', () => url => { return await xfetch(url, method='GET', jsonItem=null) }) })pero creo que esto no funciona porque el asíncrono no funciona cuando lo pongo en $magic.
Dos preguntas:
Gracias
EDITAR: Actualizar esta respuesta como @Super y yo trabajamos en esto y parece que descubrimos las respuestas a las preguntas originales planteadas.
SIN EMBARGO: parece que no puede hacer ambas cosas al mismo tiempo. Parece que no puede tener una magia $ que sea asíncrona y también acepte argumentos.
También me gustaría señalar que HTMX tiene una funcionalidad ajax que maneja y resuelve los resultados de Promesa asíncrona por usted.
Para su ejemplo, tal vez intente algo como esto
<script> async function xfetch(url, method = 'GET', jsonItem = null) { let response= await fetch(url, { method: method, }) .then((response) => response.json()) .then((responseJson) => { return responseJson[jsonItem] }); return response; } document.addEventListener('alpine:init', async () => { Alpine.magic('fetch', async function(url,otherdata) { let response = await xfetch(url, method = 'GET', jsonItem = null) return await response.text(); }) }) </script>