JavaScript中调用async子函数时await与否的差异疑问

你觉得这两段代码结果相同，其实核心差异在错误处理、执行顺序和Promise链的传递这几个地方：

1. 错误处理完全不同 #

• 未await subfunc()的情况：subfunc内部如果抛出错误（比如something()失败），这个错误会变成未处理的Promise拒绝，无法被func的错误捕获逻辑（比如try/catch）处理，在严格模式下甚至会导致程序直接崩溃。
• 用await subfunc()的情况：subfunc的错误会传递到func中，你可以用try/catch包裹await语句捕获错误，或者在调用func()时用.catch()处理，不会出现未捕获的Promise拒绝。

举个错误处理的例子：

async function something() {
  throw new Error('something went wrong');
}

async function subfunc(){
    await something()
}

// 未await的情况：错误无法被捕获
async function func1(){
  try {
    subfunc();
  } catch(err) {
    console.log('捕获到错误：', err); // 这段代码不会执行
  }
}
func1(); // 控制台会输出未处理的Promise拒绝错误

// 用await的情况：错误可以被捕获
async function func2(){
  try {
    await subfunc();
  } catch(err) {
    console.log('捕获到错误：', err); // 会正常打印错误信息
  }
}
func2();

2. 代码执行顺序有差异 #

如果func里有后续代码，两种写法的执行时机完全不同：

• 未await subfunc()：func会在调用subfunc后立即执行后续代码，不管subfunc内部的something()有没有完成。
• 用await subfunc()：func会暂停执行，直到subfunc的Promise完成（也就是something()执行完毕），才会继续走后续代码。

举个执行顺序的例子：

async function something() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('something 执行完成');
}

async function subfunc(){
    await something()
}

// 未await的情况
async function func1(){
    subfunc();
    console.log('func1 执行完成'); // 先打印这句话，1秒后才打印something的内容
}
func1();

// 用await的情况
async function func2(){
    await subfunc();
    console.log('func2 执行完成'); // 1秒后先打印something的内容，再打印这句话
}
func2();

3. Promise链的传递不同 #

async函数本身会返回一个Promise，两种写法对这个Promise的状态影响不同：

• 未await subfunc()：func返回的Promise会立即resolve，完全不等待subfunc的执行结果，subfunc的Promise是独立运行的。
• 用await subfunc()：func返回的Promise会等待subfunc的Promise状态，只有subfunc完成后，func的Promise才会resolve或者reject。

简单说就是，前者的func和subfunc的Promise是两条独立的链，后者是串联成一条链的。

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