JavaScript类函数能否用async/await？返回Promise的问题

当然可以在JavaScript类的函数里使用async/await啦！你听说的「必须加static关键字」是个常见误区——static是用来定义类的静态方法的（不需要实例化就能调用的方法），和async/await本身没有任何强制绑定关系。你的第一段代码能正常打印接口返回数据，就已经说明类的实例async方法是完全可行的～

为什么你的第二段代码返回的是Promise？ #

这里的核心点要记住：所有async函数，不管是独立函数还是类方法，都会默认返回一个Promise对象，哪怕你在函数里return了一个普通值，JavaScript也会自动把它包装成Promise.resolve(返回值)。所以你调用这个async方法时，直接拿到的肯定是Promise，而不是最终的title值。

怎么拿到最终的返回值？ #

有两种常用的方式来获取async方法的最终结果：

1. 在另一个async函数中使用await调用 #

你可以把调用逻辑放在一个async函数里（包括类的其他async实例方法），用await来等待Promise完成：

class DataFetcher {
  // 你的异步获取数据方法
  async fetchData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    return res.json();
  }

  // 获取title的方法
  async getTitle() {
    const data = await this.fetchData();
    return data.title;
  }
}

// 外部调用示例
async function run() {
  const fetcher = new DataFetcher();
  const finalTitle = await fetcher.getTitle();
  console.log(finalTitle); // 这里就能拿到最终的title字符串了
}
run();

2. 使用Promise的.then()链式处理 #

如果不想用async包裹调用逻辑，也可以用Promise的.then()方法来处理结果：

const fetcher = new DataFetcher();
fetcher.getTitle().then(title => {
  console.log(title); // 在回调里拿到最终的title值
}).catch(error => {
  console.error('获取数据失败:', error);
});

额外提醒 #

类的静态方法也可以是async的，比如：

class DataFetcher {
  static async fetchStaticData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    return res.json();
  }
}
// 调用时不需要实例化
DataFetcher.fetchStaticData().then(data => console.log(data));

但这只是类方法的一种类型，和async/await的使用无关——你完全可以根据需求选择用实例async方法还是静态async方法。

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