Alpine.js如何实现带加载提示的异步计算属性

原有代码问题根源 #

• 异步逻辑直接写在x-html模板渲染表达式中，Alpine 重渲染时会重复触发逻辑执行，状态更新时机完全不可控
• 未处理请求竞态：快速拖动滑块时会同时发起多个请求，旧请求晚于新请求返回时会覆盖正确结果
• 仅靠title是否为null单变量控制两种显示状态，异步赋值和DOM更新存在时间差，直接导致加载提示和内容同时展示的异常
• 额外绑定change事件手动重置状态，逻辑冗余分散

最优实现代码 #

用Alpine原生的$watch监听状态变化，统一管理加载状态+请求取消逻辑，彻底解决上述问题：

<script src="//unpkg.com/alpinejs" defer></script>

<script>
  async function getTitle(id, signal) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, { signal })
    const data = await response.json();

    await new Promise(resolve => setTimeout(resolve, 2500)) // 模拟额外延迟

    return data.title.toUpperCase()
  }
</script>

<div x-data="{
  todoId: 10,
  title: 'A PRELOADED TODO TITLE',
  loading: false,
  abortCtrl: null,
  init() {
    // 监听滑块值变化，自动触发异步拉取
    this.$watch('todoId', async (newId) => {
      // 取消上一个未完成的请求，解决竞态问题
      if (this.abortCtrl) this.abortCtrl.abort()
      this.abortCtrl = new AbortController()

      // 统一重置状态
      this.loading = true
      this.title = null

      try {
        this.title = await getTitle(newId, this.abortCtrl.signal)
      } catch (err) {
        // 忽略主动取消的请求错误，其他错误可自行处理
        if (err.name !== 'AbortError') console.error(err)
      } finally {
        this.loading = false
      }
    })
  }
}">
    <h3>Title formatter</h3>
    <p>Grab a todo via API and uppercases title </p>
    <input x-model="todoId" id="steps-range" type="range" min="0" max="50" step="1">
    <div x-show="!loading && title" x-html="title"></div>
    <div x-show="loading">Loading ...</div>
</div>

实现优势 #

• 逻辑收敛：所有异步处理逻辑全部集中在init的watch回调中，模板只负责纯状态渲染，没有混杂异步逻辑
• 无竞态问题：通过AbortController主动取消过期请求，不管拖动多快都只会展示最后一次请求的结果
• 状态可靠：用独立的loading变量控制加载态，和内容状态完全分离，不会出现同时显示的问题
• 代码简洁：不需要在input上额外绑定事件手动重置状态，值变化时自动触发全流程

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