如何确认JavaScript异步调用？还有哪些方法验证flexStuff()异步执行？

一、确认JavaScript异步调用的基础方式 #

• 识别async关键字：带有async声明的函数本质是异步函数，会默认返回一个Promise对象，这是最直接的标识。
• 检查await关键字：await会暂停当前async函数的执行，等待右侧表达式（即使是非Promise值也会被包装为resolved状态的Promise）处理完成后再继续，存在await意味着函数包含异步执行逻辑。
• 观察代码执行顺序：异步代码不会阻塞主线程，同步代码会优先执行完毕，异步逻辑会在同步任务完成后才进入执行队列。

二、验证flexStuff()函数异步执行的具体方法 #

方法1：利用async函数的Promise返回特性 #

async函数无论是否显式返回值，都会返回一个Promise。我们可以通过.then()方法验证：

document.addEventListener('DOMContentLoaded', () => {
  flexStuff().then(() => {
    console.log('flexStuff 异步执行完成');
  });

  async function flexStuff() {
    // 原有DOM操作代码...
    await 2022;
  }
});

如果控制台输出flexStuff 异步执行完成，说明函数是异步执行的——只有Promise对象才能调用.then()方法。

方法2：通过日志对比执行顺序 #

在同步代码和flexStuff的不同阶段添加日志，观察输出顺序：

document.addEventListener('DOMContentLoaded', () => {
  console.log('主线程同步代码开始');
  flexStuff();
  console.log('主线程同步代码结束');

  async function flexStuff() {
    console.log('flexStuff 内部同步逻辑执行');
    // 原有DOM操作代码...
    await 2022;
    console.log('flexStuff 内部await后的异步逻辑执行');
  }
});

预期输出顺序：

主线程同步代码开始
flexStuff 内部同步逻辑执行
主线程同步代码结束
flexStuff 内部await后的异步逻辑执行

await会将后续代码推入微任务队列，等所有同步代码执行完毕后才会执行，这一顺序差异直接证明了函数的异步特性。

方法3：检查函数返回值类型 #

直接打印flexStuff()的返回值，若为Promise对象则说明是异步函数：

document.addEventListener('DOMContentLoaded', () => {
  const result = flexStuff();
  console.log(result); // 输出: Promise {<pending>}

  async function flexStuff() {
    // 原有代码...
    await 2022;
  }
});

这是async函数的语法特性，所有async函数的返回值必然是Promise，无需额外逻辑即可验证。

方法4：通过微任务与宏任务的优先级验证 #

利用微任务（await触发）和宏任务（setTimeout）的执行优先级差异验证：

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => console.log('全局宏任务'), 0);
  flexStuff();
  console.log('主线程同步代码');

  async function flexStuff() {
    console.log('flexStuff 同步部分');
    await 2022;
    console.log('flexStuff 异步部分（微任务）');
    setTimeout(() => console.log('flexStuff内部宏任务'), 0);
  }
});

预期输出顺序：

主线程同步代码
flexStuff 同步部分
flexStuff 异步部分（微任务）
全局宏任务
flexStuff内部宏任务

await后的代码属于微任务，会优先于所有宏任务执行，这一优先级规律可证明flexStuff存在异步执行逻辑。

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