JavaScriptasync/await错误处理详解

大家好，今天本人给大家带来文章《JavaScript async/await 同步错误处理解析》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

async/await 的基本工作原理

在深入探讨特定场景之前，首先回顾async/await的核心机制。async函数总是返回一个Promise。await操作符用于暂停async函数的执行，直到其右侧的Promise被解决（resolved）或拒绝（rejected）。如果await表达式右侧不是一个Promise，JavaScript会将其隐式地转换为一个已解决的Promise（即Promise.resolve(value)），然后等待该Promise。

场景分析：同步函数在 await 内部抛出错误

考虑以下三种不同的closure函数行为，它们被一个async函数load内部的await调用：

async function load(closure) {
  try {
    await closure(); // 关键点：await操作符对closure()结果的处理
  } catch (error) {
    console.log("error");
  } finally {
    console.log("finished");
  }
}

console.log("hello - 外部代码开始");

// 示例1: closure 是一个 async 函数并抛出错误
console.log("\n--- 示例1: async closure 抛出错误 ---");
load(async () => {
  throw new Error("Async closure error");
});
console.log("hello - 外部代码继续 (示例1)");

// 示例2: closure 是一个同步函数并抛出错误
console.log("\n--- 示例2: 同步 closure 抛出错误 ---");
load(() => {
  throw new Error("Sync closure error");
});
console.log("hello - 外部代码继续 (示例2)");

// 示例3: closure 是一个同步函数并返回一个值
console.log("\n--- 示例3: 同步 closure 返回值 ---");
load(() => {
  return 1;
});
console.log("hello - 外部代码继续 (示例3)");

// 示例4: closure 是一个同步函数并返回一个拒绝的 Promise
console.log("\n--- 示例4: 同步 closure 返回拒绝的 Promise ---");
load(() => {
  return Promise.reject("Rejected Promise");
});
console.log("hello - 外部代码继续 (示例4)");

运行上述代码，观察其输出顺序：

hello - 外部代码开始

--- 示例1: async closure 抛出错误 ---
hello - 外部代码继续 (示例1)
error
finished

--- 示例2: 同步 closure 抛出错误 ---
error
finished
hello - 外部代码继续 (示例2)

--- 示例3: 同步 closure 返回值 ---
hello - 外部代码继续 (示例3)
finished

--- 示例4: 同步 closure 返回拒绝的 Promise ---
hello - 外部代码继续 (示例4)
error
finished

让我们逐一分析这些输出，理解await的行为：

1. async 函数内部抛出错误 (await asyncFn())

当closure本身是一个async函数时，它总是返回一个Promise。即使它内部抛出错误，这个错误也会被Promise机制捕获并转化为一个被拒绝的Promise。

// 示例1 解释
load(async () => {
  throw new Error("Async closure error");
});

在这种情况下，await closure()接收到一个被拒绝的Promise。await操作符会暂停load函数的执行，并将该Promise的拒绝值传递给load函数内部的try-catch块。由于load函数暂停了，外部的console.log("hello - 外部代码继续 (示例1)")会立即执行。只有当下一个事件循环周期到来时，load函数才会恢复执行，捕获错误并打印error和finished。

输出顺序：

1. hello - 外部代码开始
2. --- 示例1: async closure 抛出错误 ---
3. hello - 外部代码继续 (示例1) (因为load函数被await暂停)
4. error (从load的catch块)
5. finished (从load的finally块)

2. 同步函数内部抛出错误 (await syncFnThrowsError())

这是最容易混淆的场景。当closure是一个同步函数，并且它在执行过程中同步抛出错误时，await操作符实际上没有机会对其结果进行处理。

// 示例2 解释
load(() => {
  throw new Error("Sync closure error");
});

在await closure()这一行，closure()会立即执行。由于它是一个同步函数，并且同步抛出了一个错误，这个错误会沿着调用栈立即向上冒泡，直到被最近的try-catch块捕获。在这个例子中，load函数内部的try-catch块会立即捕获到这个错误。这意味着await操作符没有机会接收到任何值（无论是Promise还是普通值）来执行其暂停行为。因此，load函数会同步地完成其try-catch-finally块，然后才将控制权返回给外部调用栈。

输出顺序：

1. hello - 外部代码开始
2. --- 示例2: 同步 closure 抛出错误 ---
3. error (立即从load的catch块)
4. finished (立即从load的finally块)
5. hello - 外部代码继续 (示例2) (因为load函数同步执行完毕)

3. 同步函数返回一个值 (await syncFnReturnsValue())

当closure是一个同步函数，并且它返回一个非Promise的值时，await操作符会将其隐式地转换为一个已解决的Promise (Promise.resolve(1))。

// 示例3 解释
load(() => {
  return 1;
});

在这种情况下，await Promise.resolve(1)会暂停load函数的执行，将其放入微任务队列。因此，外部的console.log("hello - 外部代码继续 (示例3)")会先执行。当下一个事件循环周期到来时，load函数会恢复执行，因为Promise已解决，它会跳过catch块，直接执行finally块。

输出顺序：

1. hello - 外部代码开始
2. --- 示例3: 同步 closure 返回值 ---
3. hello - 外部代码继续 (示例3) (因为load函数被await暂停)
4. finished (从load的finally块)

4. 同步函数返回一个拒绝的Promise (await syncFnReturnsRejectedPromise())

当closure是一个同步函数，但它返回一个被拒绝的Promise时，await操作符会直接接收到这个被拒绝的Promise。

// 示例4 解释
load(() => {
  return Promise.reject("Rejected Promise");
});

这与示例1（async函数抛出错误）的行为类似。await操作符会暂停load函数的执行，并将该Promise的拒绝值传递给load函数内部的try-catch块。外部的console.log("hello - 外部代码继续 (示例4)")会先执行。当下一个事件循环周期到来时，load函数才会恢复执行，捕获错误并打印error和finished。

输出顺序：

1. hello - 外部代码开始
2. --- 示例4: 同步 closure 返回拒绝的 Promise ---
3. hello - 外部代码继续 (示例4) (因为load函数被await暂停)
4. error (从load的catch块)
5. finished (从load的finally块)

总结与注意事项

从上述分析可以看出，await操作符的异步暂停行为，取决于其右侧表达式的最终结果是否是一个Promise（或可转换为Promise的值），以及这个结果是如何产生的。

• 同步抛出的错误： 如果被await调用的函数是同步的，并且在执行过程中同步抛出错误，那么这个错误会立即向上冒泡，await根本没有机会处理任何值，也因此不会触发异步暂停。async函数会表现出同步捕获错误的行为。

  function syncFnThrows() {
    throw new Error("Synchronous error");
  }
  
  async function process() {
    try {
      await syncFnThrows(); // 错误在此处同步抛出并被捕获
    } catch (e) {
      console.error("同步错误被捕获，await未暂停");
    }
    console.log("process函数执行完毕");
  }
  
  process();
  console.log("外部代码继续");
  // 输出：
  // 同步错误被捕获，await未暂停
  // process函数执行完毕
  // 外部代码继续

• 返回Promise或可转换为Promise的值： 如果被await调用的函数返回一个Promise（无论是已解决还是已拒绝），或者返回一个普通值（会被隐式转换为Promise.resolve(value)），那么await操作符会暂停当前async函数的执行，将其放入微任务队列，从而允许事件循环继续处理其他任务。

  function syncFnReturnsRejectedPromise() {
    return Promise.reject("Rejected Promise");
  }
  
  async function processPromise() {
    try {
      await syncFnReturnsRejectedPromise(); // await接收到Promise，暂停
    } catch (e) {
      console.error("Promise拒绝被捕获，await已暂停");
    }
    console.log("processPromise函数执行完毕");
  }
  
  processPromise();
  console.log("外部代码继续");
  // 输出：
  // 外部代码继续
  // Promise拒绝被捕获，await已暂停
  // processPromise函数执行完毕

关键点： await关键字的“暂停”效果，只在它成功接收到一个Promise（或一个值并将其转换为Promise）时才发生。如果其右侧的表达式在求值过程中就同步地抛出了错误，那么这个错误会立即传播，await的异步特性便不会被触发。理解这一点对于编写健壮且行为可预测的异步JavaScript代码至关重要。

今天关于《JavaScriptasync/await错误处理详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！