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 表达式中的错误。

// www.javascriptcn.com code example
async function baz() {
  try {
    const result = await Promise.reject('Error occurred');
    console.log(result);
  } catch (error) {
    console.error(error); // 输出 'Error occurred'
  }
}

baz();

与 Promise 的关系

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

// www.javascriptcn.com code example
// 使用 Promise
function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

// 使用 async/await
async function fetchDataAsync() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

总结

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