理解 JavaScript 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 块。

示例代码：

立即学习“Java免费学习笔记（深入）”；

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 块立即捕获到这个同步错误，而不会暂停执行。

示例代码：

立即学习“Java免费学习笔记（深入）”；

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 函数的执行，直到下一个微任务队列周期。

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

28

查看详情

示例代码：

立即学习“Java免费学习笔记（深入）”；

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 同样会将其异步处理。

示例代码：

立即学习“Java免费学习笔记（深入）”；

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 异步代码至关重要。

以上就是理解 JavaScript await 行为：同步错误与异步流程的边界的详细内容，更多请关注php中文网其它相关文章！