🎉  The Alpine Day 2021 videos are out! Watch Now

Async

Alpine is built to support asynchronous functions in most places it supports standard ones.

For example, let's say you have a simple function called getLabel() that you use as the input to an x-text directive:

function getLabel() {
    return 'Hello World!'
}
<span x-text="getLabel()"></span>

Because getLabel is synchronous, everything works as expected.

Now let's pretend that getLabel makes a network request to retrieve the label and can't return one instantaneously (asynchronous). By making getLabel an async function, you can call it from Alpine using JavaScript's await syntax.

async function getLabel() {
    let response = await fetch('/api/label')

    return await response.text()
}
<span x-text="await getLabel()"></span>

Additionally, if you prefer calling methods in Alpine without the trailing parenthesis, you can leave them out and Alpine will detect that the provided function is async and handle it accordingly. For example:

<span x-text="getLabel"></span>