JavaScript中class参数能否异步赋值？await赋值静态属性失败如何解决

问题根因 #

你给出的写法无法运行是因为 ES 规范中，类静态字段的初始化上下文不支持直接使用 await 关键字，只有模块的顶级作用域才允许直接使用顶级 await 语句。

可行实现方案 #

方案1：模块顶级 await 预先赋值 #

这是最简洁的方案，直接在模块顶层先执行异步函数拿到结果，再赋值给类静态字段：

// 先在模块顶级执行异步调用
const asyncResult = await myAsyncFunction();

export class MyClass {
  static myParam = asyncResult;
}

注意：这个方案要求当前文件是 ES 模块（即文件后缀为 .mjs，或者 package.json 中配置了 "type": "module"），才支持顶级 await 语法。

方案2：用静态异步方法主动获取 #

如果不希望在模块加载阶段就执行异步逻辑，可以封装成静态异步方法，需要用到的时候再调用获取值，还可以内置缓存避免重复执行异步函数：

export class MyClass {
  static async getMyParam() {
    if (!this._cachedResult) {
      this._cachedResult = await myAsyncFunction();
    }
    return this._cachedResult;
  }
}

// 使用时的写法
const param = await MyClass.getMyParam();

方案3：直接赋值为Promise对象 #

如果不需要等待异步结果返回就可以加载类，也可以直接将静态字段赋值为异步函数返回的Promise，使用时再await取值：

export class MyClass {
  static myParam = myAsyncFunction();
}

// 使用时的写法
const param = await MyClass.myParam;

注意：这个方案下 MyClass.myParam 本身是 Promise 类型，所有使用该字段的场景都需要用 await 或者 .then() 处理异步逻辑。

内容的提问来源于stack exchange，提问作者Hani.D