JavaScript 中 async/await 的原理是什么？

推荐答案

async function example() {
  const result = await someAsyncFunction();
  console.log(result);
}

async/await 是 JavaScript 中处理异步操作的语法糖，基于 Promise 实现。async 函数会返回一个 Promise 对象，而 await 关键字会暂停函数的执行，直到等待的 Promise 被解决（resolved）或拒绝（rejected）。

本题详细解读

async 关键字

• async 关键字用于声明一个异步函数。当你在函数前加上 async 时，这个函数会自动返回一个 Promise 对象。
• 如果函数内部返回一个值，这个值会被包装成一个 resolved 状态的 Promise。
• 如果函数内部抛出异常，这个异常会被包装成一个 rejected 状态的 Promise。

async function foo() {
  return 42;
}

foo().then(result => console.log(result)); // 输出 42

await 关键字

• await 关键字只能在 async 函数内部使用。它用于等待一个 Promise 对象的解决或拒绝。
• 当 await 遇到一个 Promise 时，它会暂停当前 async 函数的执行，直到 Promise 被解决或拒绝。
• 如果 Promise 被解决，await 会返回解决的值；如果 Promise 被拒绝，await 会抛出异常。

async function bar() {
  const result = await new Promise((resolve) => setTimeout(() => resolve('Done'), 1000));
  console.log(result); // 1秒后输出 'Done'
}

bar();

错误处理

• 使用 try/catch 结构可以捕获 await 表达式中的错误。

-- -------------------- ---- -------
----- -------- ----- -
  --- -
    ----- ------ - ----- --------------------- -----------
    --------------------
  - ----- ------- -
    --------------------- -- -- ------ ---------
  -
-

------

与 Promise 的关系

• async/await 是 Promise 的语法糖，本质上仍然是基于 Promise 的。它使得异步代码的编写和阅读更加直观，类似于同步代码。

-- -------------------- ---- -------
-- -- -------
-------- ----------- -
  ------ -------------------------------------
    -------------- -- ----------------
    ---------- -- ------------------
    ------------ -- ----------------------
-

-- -- -----------
----- -------- ---------------- -
  --- -
    ----- -------- - ----- --------------------------------------
    ----- ---- - ----- ----------------
    ------------------
  - ----- ------- -
    ---------------------
  -
-

总结

• async/await 使得异步代码的编写更加简洁和易读，同时保留了 Promise 的强大功能。
• 它通过暂停函数的执行来等待异步操作完成，从而避免了回调地狱（Callback Hell）和复杂的 Promise 链。