Async/Await执行意外终止及无等待效果问题求助

1. 未触发Promise的resolve导致流程阻塞 #

你定义的foo和bar函数里，创建的Promise从未调用resolve()方法。await的本质是等待Promise进入resolved状态，而你的Promise一直处于pending状态，因此第一个await foo()会无限等待，后续的bar()和otherStuff()自然不会执行。

修复只需在setTimeout回调里调用resolve()：

export async function foo() {
  return new Promise(resolve => {
    setTimeout(() => {
       console.log('foo');
       resolve(); // 调用resolve让Promise变为resolved状态
    }, 500);
  });
}

export async function bar() {
  return new Promise(resolve => {
    setTimeout(() => {
       console.log('bar');
       resolve(); // 同理添加resolve
    }, 500);
  });
}

2. 移除内部Promise后await失效的原因 #

async函数确实会自动把返回值包装成Promise，但如果函数内部没有异步操作（比如去掉setTimeout和Promise），async函数会立即返回一个resolved状态的Promise，await会直接跳过等待，导致所有函数同步执行，失去顺序性。

如果不想手动创建Promise，可以封装一个通用延迟函数，在async函数里await这个延迟：

// 通用延迟函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

export async function foo() {
  await delay(500);
  console.log('foo');
}

export async function bar() {
  await delay(500);
  console.log('bar');
}

这样await foo()会等待500ms及打印完成后，再执行await bar()，保证执行顺序。

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