Alpine.js自定义$magic如何支持async异步与多参数传递

两个问题的明确答复 #

• 魔法函数完全支持await异步返回结果：异步逻辑失效是代码写法错误导致的，和Alpine魔法属性本身的机制无关。Alpine 3.x原生支持在模板表达式中await Promise，不管是全局函数还是魔法函数返回的Promise都可以正常解析。
• 魔法函数支持传入任意数量的参数：没有参数个数限制，和普通JS函数的传参规则完全一致。

原有代码的错误点 #

你之前写的魔法属性注册代码存在语法错误：内层执行请求逻辑的箭头函数没有标记async，而await关键字只能在async函数内部使用，直接写会抛出语法错误，导致功能完全无法运行。

修正后的可用代码 #

1. 魔法属性注册逻辑 #

document.addEventListener('alpine:init', () => {
    Alpine.magic('fetch', () => {
        // 返回async标记的箭头函数，内部可正常使用await
        return async (url, method = 'GET', jsonItem = null) => {
            return await xfetch(url, method, jsonItem)
        }
    })
})

2. 模板中使用方式 #

和你之前使用全局xfetch的体验完全一致，不需要额外调整写法：

<div x-data="{ time: null }" x-init="time = $fetch('http://date.jsontest.com', 'GET', 'time')">
    <p>
        从x-data变量读取接口返回的时间：
        <span x-text="await time"></span>
    </p>
    <p>
        直接在指令中调用获取日期：
        <span x-text="await $fetch('http://date.jsontest.com', 'GET', 'date')"></span>
    </p>
</div>

注意：不要在x-data的初始化对象中直接赋值Promise，建议放在x-init中赋值，避免初始化时序问题导致的渲染异常。

内容的提问来源于stack exchange，提问作者Super