理解JavaScriptawait：异步错误处理技巧

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《理解 JavaScript await：同步错误与异步边界》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

JavaScript 中 await 关键字通常用于暂停异步函数执行直到 Promise 解决。然而，当一个非 async 函数在被 await 调用时同步抛出错误，其行为会出乎意料地变为同步，立即中断当前执行流。这与 async 函数抛出错误或非 async 函数返回值的异步行为形成鲜明对比。本文将深入探讨 await 内部机制，解释为何会出现这种差异，并提供清晰的代码示例，帮助开发者掌握 await 在不同场景下的精确行为。

await 操作符的核心机制

await 操作符旨在等待一个 Promise 解决。根据 MDN 文档，await 表达式的处理方式与 Promise.resolve() 类似：任何被 await 的值都会被转换为一个原生 Promise，然后才进行等待。这意味着，如果 await 后面跟着的表达式不是一个 Promise，JavaScript 会隐式地将其包装成 Promise.resolve(value)。

然而，这个隐式包装和等待机制有一个关键前提：被 await 的函数必须能够完成执行并返回一个值（无论是普通值还是 Promise）。如果函数在返回之前就抛出了一个同步错误，那么 await 的行为将截然不同。

为了更好地理解这一点，我们通过几个具体的代码示例来分析 await 在不同情况下的行为。

场景一：async 函数抛出错误（异步行为）

当 await 一个 async 函数，即使该 async 函数内部抛出错误，整个操作仍然是异步的。这是因为 async 函数总是返回一个 Promise。如果 async 函数内部抛出错误，这个 Promise 会被隐式地拒绝。await 接收到这个被拒绝的 Promise 后，会将其异步处理，并将错误传递给调用者的 catch 块。

示例代码：

async function load(closure) {
  try {
    await closure();
  } catch (error) {
    console.log("error caught");
  } finally {
    console.log("finished");
  }
}

console.log("--- 示例 1: async 函数抛出错误 ---");
load(async () => {
  throw new Error("Async function error");
});
console.log("hello");

输出：

--- 示例 1: async 函数抛出错误 ---
hello
error caught
finished

解析：closure 是一个 async 函数，它抛出了错误。async 函数无论如何都会返回一个 Promise。当它抛出错误时，返回的是一个被拒绝的 Promise。await 接收到这个被拒绝的 Promise 后，会将 load 函数的其余部分（catch 和 finally 块）推迟到微任务队列中执行。因此，console.log("hello") 会在 load 函数的 catch 和 finally 块之前执行。

场景二：非 async 函数同步抛出错误（同步行为）

这是最容易混淆的情况。当 await 一个非 async 函数，并且该函数在执行过程中同步抛出错误时，await 表达式实际上并不会有机会将任何值包装成 Promise。错误会立即传播，导致 await 所在的 async 函数的 try...catch 块立即捕获到这个同步错误，而不会暂停执行。

示例代码：

async function load(closure) {
  try {
    await closure();
  } catch (error) {
    console.log("error caught");
  } finally {
    console.log("finished");
  }
}

console.log("\n--- 示例 2: 非 async 函数同步抛出错误 ---");
load(() => {
  throw new Error("Synchronous function error");
});
console.log("hello");

输出：

--- 示例 2: 非 async 函数同步抛出错误 ---
error caught
finished
hello

解析：closure 是一个普通的同步函数，它在执行时立即抛出了一个错误。这个错误是在 await closure() 表达式求值过程中同步发生的。由于错误发生得太快，closure 函数没有机会返回任何值（无论是普通值还是 Promise），因此 await 也就没有机会将任何东西包装成 Promise.resolve()。这个同步错误直接被 load 函数外部的 try...catch 块捕获。load 函数并没有因为 await 而暂停，而是同步执行了 catch 和 finally 块。

场景三：非 async 函数返回一个值（异步行为）

如果一个非 async 函数被 await 调用，并且它成功返回了一个值（而不是抛出错误），那么 await 就会将这个返回值隐式地包装成 Promise.resolve(value)。此时，await 就会像等待一个 Promise 一样，暂停 async 函数的执行，直到下一个微任务队列周期。

示例代码：

async function load(closure) {
  try {
    await closure();
  } catch (error) {
    console.log("error caught");
  } finally {
    console.log("finished");
  }
}

console.log("\n--- 示例 3: 非 async 函数返回一个值 ---");
load(() => {
  return 1; // 返回一个普通值
});
console.log("hello");

输出：

--- 示例 3: 非 async 函数返回一个值 ---
hello
finished

解析：closure 是一个同步函数，它返回了数值 1。await 接收到这个 1 后，将其包装成 Promise.resolve(1)。load 函数会暂停，直到这个 Promise 在下一个微任务周期解决。因此，console.log("hello") 会在 load 函数的 finally 块之前执行。

场景四：非 async 函数返回一个被拒绝的 Promise（异步行为）

如果一个非 async 函数返回一个已经被拒绝的 Promise，await 同样会将其异步处理。

示例代码：

async function load(closure) {
  try {
    await closure();
  } catch (error) {
    console.log("error caught:", error);
  } finally {
    console.log("finished");
  }
}

console.log("\n--- 示例 4: 非 async 函数返回被拒绝的 Promise ---");
load(() => {
  return Promise.reject("Rejected promise error");
});
console.log("hello");

输出：

--- 示例 4: 非 async 函数返回被拒绝的 Promise ---
hello
error caught: Rejected promise error
finished

解析：closure 函数直接返回了一个被拒绝的 Promise。await 接收到这个 Promise 后，会等待其解决（或拒绝）。由于它是一个被拒绝的 Promise，load 函数会暂停，并在下一个微任务周期进入 catch 块。因此，console.log("hello") 会在 load 函数的 catch 和 finally 块之前执行。

总结与注意事项

通过以上示例，我们可以得出以下关键结论：

1. await 的异步特性依赖于 Promise 的生成： 只有当 await 表达式能够成功求值并得到一个 Promise（无论是显式返回的还是隐式包装的 Promise.resolve()），async 函数才会暂停并表现出异步行为。
2. 同步错误优先： 如果一个被 await 的同步函数在执行过程中同步抛出错误，这个错误会立即传播，await 无法将其转换为 Promise 错误。此时，async 函数不会暂停，而是立即进入其 try...catch 块来处理这个同步错误。
3. async 函数的保证： async 函数总是返回 Promise。即使内部抛出错误，也会转化为被拒绝的 Promise，从而保持其异步特性。

重要提示： 在编写代码时，尤其是在处理可能抛出错误的同步函数时，应清楚地理解 await 的这种行为。如果你希望一个同步函数抛出的错误也能被 await 异步处理，你需要确保该函数本身返回一个 Promise（例如，通过 Promise.reject() 显式返回一个被拒绝的 Promise），或者将其包装在一个 async 函数中。

理解这些细微差别对于编写健壮、可预测的 JavaScript 异步代码至关重要。

以上就是《理解JavaScriptawait：异步错误处理技巧》的详细内容，更多关于的资料请关注golang学习网公众号！