async 函数和普通函数的区别是什么？

推荐答案

• 返回值：async 函数总是返回一个 Promise 对象，即使函数内部返回的是一个非 Promise 值，它也会被自动包装成一个 Promise。而普通函数则直接返回函数体内的返回值。
• 执行方式：async 函数内部可以使用 await 关键字来暂停函数的执行，直到 await 后面的 Promise 完成。普通函数则按照同步顺序执行，无法暂停。
• 错误处理：async 函数可以通过 try/catch 来捕获 await 表达式中可能抛出的错误。普通函数则需要手动处理错误，或者通过回调函数传递错误。
• 调用方式：async 函数可以通过 await 或 .then() 来调用，而普通函数只能直接调用。

本题详细解读

1. 返回值

async 函数的返回值始终是一个 Promise 对象。即使你在 async 函数中返回了一个非 Promise 的值，JavaScript 引擎也会自动将其包装成一个 Promise。例如：

async function foo() {
  return 42;
}

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

而普通函数的返回值则直接是函数体内的返回值：

function bar() {
  return 42;
}

console.log(bar()); // 输出 42

2. 执行方式

async 函数内部可以使用 await 关键字来暂停函数的执行，直到 await 后面的 Promise 完成。这使得 async 函数可以以同步的方式编写异步代码。例如：

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

而普通函数则按照同步顺序执行，无法暂停：

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json());
}

3. 错误处理

async 函数可以通过 try/catch 来捕获 await 表达式中可能抛出的错误：

// www.javascriptcn.com code example
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

而普通函数则需要手动处理错误，或者通过回调函数传递错误：

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .catch(error => console.error('Error:', error));
}

4. 调用方式

async 函数可以通过 await 或 .then() 来调用：

// www.javascriptcn.com code example
async function foo() {
  return 42;
}

// 使用 await 调用
(async function() {
  const result = await foo();
  console.log(result); // 输出 42
})();

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

而普通函数只能直接调用：

function bar() {
  return 42;
}

console.log(bar()); // 输出 42