JavaScriptawait用法与异常处理详解

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JavaScript await 详解：同步异常与异步控制》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

理解 await 的核心机制：Promise 化

await 关键字是 JavaScript 异步编程中的强大工具，它允许我们以同步的方式编写异步代码。然而，await 的行为并非总是直观的，尤其是在处理同步抛出的错误时。理解其核心机制是关键：await 总是尝试将其操作数转换为一个 Promise。根据 MDN 文档，await expression 的行为类似于 Promise.resolve(expression)，它会等待这个 Promise 解决（无论是 fulfilled 还是 rejected）。

这意味着，await 只有在成功地将操作数“包装”成一个 Promise 后，才会暂停当前 async 函数的执行。如果在此之前发生了错误，那么 await 机制可能就不会按预期触发。

场景一：非 async 函数同步抛出异常

当 await 的操作数是一个普通的（非 async）函数，并且这个函数在执行过程中立即抛出错误时，await 的暂停行为将不会发生。

示例代码：

async function load(closure) {
  try {
    // 尝试等待 closure 的结果
    await closure();
  } catch (error) {
    console.log("error caught in load function");
  } finally {
    console.log("finally block executed");
  }
}

console.log("--- 场景一：非 async 函数同步抛错 ---");
load(() => {
  throw new Error("Synchronous error from closure"); // closure 立即抛出错误
});
console.log("hello from global scope");

预期输出：

--- 场景一：非 async 函数同步抛错 ---
error caught in load function
finally block executed
hello from global scope

行为解析：

在此场景中，closure() 是一个同步函数，它在执行时立即抛出了一个错误。这个错误发生在 await 能够将 closure() 的返回值（如果 closure 返回了值的话）包装成 Promise 之前。由于 closure() 根本没有返回任何值，也没有机会形成一个 Promise，await 实际上没有接收到任何 Promise 来等待。因此，load 函数的执行流程没有被暂停，错误被 try...catch 块同步捕获，finally 块也同步执行。随后，控制流立即回到事件循环，console.log("hello from global scope") 在 load 函数的微任务队列被调度之前执行。

场景二：非 async 函数同步返回一个值

如果 await 的操作数是一个普通的（非 async）函数，并且这个函数同步返回一个值，await 的暂停行为会按预期发生。

示例代码：

async function load(closure) {
  try {
    await closure(); // closure 同步返回一个值
  } catch (error) {
    console.log("error caught in load function");
  } finally {
    console.log("finally block executed");
  }
}

console.log("\n--- 场景二：非 async 函数同步返回值 ---");
load(() => {
  return 1; // closure 返回一个值
});
console.log("hello from global scope");

预期输出：

--- 场景二：非 async 函数同步返回值 ---
hello from global scope
finally block executed

行为解析：

当 closure() 同步返回一个值 1 时，await 会将这个值通过 Promise.resolve(1) 隐式地转换为一个已解决的 Promise。此时，await 会暂停 load 函数的执行，并将 load 函数中 await 之后的所有代码（包括 finally 块）放入微任务队列。因此，主线程的 console.log("hello from global scope") 会立即执行，之后才轮到微任务队列中的 finally block executed。

场景三：async 函数或返回 Promise 的函数抛出/拒绝

async 函数总是返回一个 Promise。即使它内部抛出错误，这个错误也会导致它返回一个被拒绝的 Promise。同样，如果一个普通函数显式地返回一个被拒绝的 Promise，await 也会处理它。

示例代码：

async function load(closure) {
  try {
    await closure(); // closure 是 async 函数或返回 Promise 的函数
  } catch (error) {
    console.log("error caught in load function");
  } finally {
    console.log("finally block executed");
  }
}

console.log("\n--- 场景三：async 函数抛错 ---");
load(async () => {
  throw new Error("Asynchronous error from async closure"); // async 函数抛出错误
});
console.log("hello from global scope");

console.log("\n--- 场景四：同步函数返回 rejected Promise ---");
load(() => {
  return Promise.reject("Manually rejected Promise"); // 同步函数返回一个被拒绝的 Promise
});
console.log("hello from global scope");

预期输出：

--- 场景三：async 函数抛错 ---
hello from global scope
error caught in load function
finally block executed

--- 场景四：同步函数返回 rejected Promise ---
hello from global scope
error caught in load function
finally block executed

行为解析：

无论是 async 函数内部抛出错误（导致其返回一个被拒绝的 Promise），还是普通函数显式地返回一个 Promise.reject()，await 接收到的都是一个 Promise。在这种情况下，await 会等待这个 Promise 的状态确定（无论是解决还是拒绝），并暂停当前 async 函数的执行。因此，主线程的 console.log("hello from global scope") 仍然会先执行，然后 await 之后的 catch 块和 finally 块才会在微任务队列中被调度执行。

总结与注意事项

通过以上分析，我们可以得出以下关键点：

• await 的核心规则： await 只有在操作数是一个 Promise（或能被 Promise.resolve() 转换为 Promise）时，才会暂停当前 async 函数的执行。
• 同步错误 vs. 异步错误处理：
  • 当一个非 async 函数在执行过程中立即抛出错误，且这个错误发生在任何值被返回或 Promise 被创建之前，await 机制不会被触发，async 函数不会暂停，错误会被同步捕获。这种情况下，await 表达式实际上从未有机会“等待”任何东西。
  • 当一个函数（无论是 async 函数还是返回 Promise 的普通函数）返回一个 Promise（无论是解决的还是拒绝的），await 都会等待这个 Promise 的解决，并暂停当前 async 函数的执行，将后续代码放入微任务队列。
• 执行顺序： 理解 JavaScript 的事件循环和微任务队列对于预测 async/await 的执行顺序至关重要。await 导致的暂停会将后续代码推迟到当前宏任务执行完毕后的下一个微任务阶段。
• 代码健壮性： 在编写异步代码时，应清楚地知道所调用的函数是同步的还是异步的，以及它们在何种情况下可能抛出错误。这有助于避免意外的同步行为，并确保错误处理逻辑能够按预期工作。特别是在处理可能同步也可能异步执行的第三方回调函数时，需要格外注意这些细节。

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

本篇关于《JavaScriptawait用法与异常处理详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！