AlpineJS函数用await报错：missing ) after argument list 原因排查

问题场景 #

我有一个简单的AlpineJS组件，用于在用户更改select元素选项时更新内容，初始代码如下：

<div 
    x-data="{ timespan: 'TODAY', stats: '' }" 
    x-init="stats = await (await fetch('timespan?timespan=' + timespan)).text()" 
    @change="stats = await (await fetch('timespan?timespan=' + timespan)).text()"
>
  <select class="select select-bordered w-full max-w-xs" x-model="timespan">
    <option value="TODAY">today</option>
    <option value="WEEK">last7 days</option>
    <option value="MONTH">last 30 days</option>
  </select>
  <div x-html="stats"></div>
</div>

为消除x-init和@change中的重复代码，我将逻辑封装到updateStats函数中，修改后的x-data如下：

<div 
  x-data="{ timespan: 'TODAY', stats: '', updateStats() { this.stats = await (await fetch('timespan?timespan=' + this.timespan)).text() } }" 
  ...
>

但调用updateStats()时出现Alpine Expression Error: missing ) after argument list错误，若将异步获取数据的代码替换为静态值则可正常运行，请问这是什么原因？

原因分析 #

报错的核心原因是：你定义的updateStats是普通函数，而await关键字仅能在async标记的异步函数内部使用。普通函数里直接使用await会触发JavaScript语法解析错误，AlpineJS在解析这个表达式时就会抛出括号缺失的语法报错。

解决方案 #

给updateStats函数加上async关键字，修改后的完整代码如下：

<div 
  x-data="{ 
    timespan: 'TODAY', 
    stats: '', 
    async updateStats() { 
      this.stats = await (await fetch('timespan?timespan=' + this.timespan)).text() 
    } 
  }" 
  x-init="updateStats()"
  @change="updateStats()"
>
  <select class="select select-bordered w-full max-w-xs" x-model="timespan">
    <option value="TODAY">today</option>
    <option value="WEEK">last7 days</option>
    <option value="MONTH">last 30 days</option>
  </select>
  <div x-html="stats"></div>
</div>

额外建议：给fetch请求加上错误处理，避免请求失败导致组件状态异常，示例代码如下：

async updateStats() {
  try {
    const response = await fetch('timespan?timespan=' + this.timespan);
    if (!response.ok) throw new Error('请求失败');
    this.stats = await response.text();
  } catch (err) {
    this.stats = '加载失败，请稍后重试';
    console.error(err);
  }
}

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