JavaScript/TypeScript中async函数及对象异步方法调用疑问

async 函数是 ES2017 引入的语法糖，专门用来简化异步代码编写，让原本需要 Promise 链式调用的异步逻辑，看起来更接近同步代码的写法。

核心特性：

• 函数声明前加 async 关键字，比如 async function handleUpdate() {}
• 内部可以用 await 关键字暂停当前函数执行，直到后续的 Promise 状态变为 resolved，再继续执行函数剩余代码
• 不管函数内部 return 什么值，async 函数都会自动把它包装成 resolved 状态的 Promise；如果函数抛出错误，则返回 rejected 状态的 Promise

先看示例代码：

// (1) 普通方法调用
myObject.handleUpdate()
// (2) async 方法调用
myObject.handleUpdate()

1. 线程运行机制 #

JavaScript/TypeScript 基于单线程事件循环模型，async 方法不会运行在单独线程：

• 普通同步方法调用后，会立即在当前线程的调用栈中执行，直到完成
• async 方法调用后，函数内的同步代码会先执行；遇到 await 时，当前函数会被暂停，对应的 Promise 被加入事件队列，控制权交回事件循环；等 Promise 完成后，事件循环才会把函数剩余部分放回调用栈继续执行，全程都在同一个线程内。

2. 测试框架中的调用差异 #

• 普通方法：调用后立即执行完毕，不需要额外处理，测试框架可直接断言结果，无需等待
• async 方法：必须等待它执行完成，否则测试会在异步逻辑结束前提前终止，导致断言失败。常见处理方式：
  • 把测试函数声明为 async，然后 await 该 async 方法的调用：

    test('测试 async 方法', async () => {
      await myObject.handleUpdate();
      // 此处编写断言逻辑
    });
    

  • 或者返回该 async 方法调用的 Promise，让测试框架自动等待：

    test('测试 async 方法', () => {
      return myObject.handleUpdate().then(() => {
        // 此处编写断言逻辑
      });
    });
    

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