JS `async` 函数的返回类型：总是 `Promise`

各位靓仔靓女，大家好！ 欢迎来到今天的JS异步魔法课堂！ 今天我们要聊聊JS中async函数的那些事儿，特别是关于它那“铁打不动”的返回类型：Promise<T>。

准备好了吗？ 系好安全带，咱们要起飞咯！

一、啥是async函数？

首先，让我们来回顾一下什么是async函数。 简单来说，async函数就是披着“异步”外衣的同步函数。 它允许你使用await关键字，让异步代码看起来像同步代码一样，从而提高代码的可读性和可维护性。

举个栗子：

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const userData = await response.json(); //这里也用了await，因为response.json() 也是异步操作
    return userData;
  } catch (error) {
    console.error("Failed to fetch user data:", error);
    throw error; // 抛出错误，让调用者知道发生了什么
  }
}

// 调用 async 函数
fetchUserData(123)
  .then(data => console.log("User data:", data))
  .catch(error => console.error("Error fetching user data:", error));

在这个例子中，fetchUserData就是一个async函数。 它使用await关键字来等待fetch和response.json()这两个异步操作完成。 这样，代码看起来就像是按顺序执行的，但实际上它们是在后台异步执行的。

二、async函数的返回类型：Promise<T>的真相

现在，我们来揭开今天的主角：async函数的返回类型。 无论你在async函数中return什么，它最终都会被包裹在一个Promise对象里。 这就是async函数的“铁律”！

1. 返回普通值：自动包装成Promise.resolve(value)

如果你在async函数中返回一个普通的值（比如数字、字符串、对象等），JS引擎会自动把它包装成一个已解决(resolved)的Promise对象。

async function getNumber() {
  return 42;
}

getNumber().then(value => console.log(value)); // 输出：42

在这个例子中，getNumber函数返回了数字42。 但实际上，JS引擎会把它包装成Promise.resolve(42)，然后then方法就会拿到这个已解决的Promise的值，也就是42。

2. 返回Promise对象：直接返回该Promise

如果你在async函数中返回一个Promise对象，JS引擎不会再做任何包装，而是直接返回这个Promise对象。

async function getPromise() {
  return new Promise(resolve => {
    setTimeout(() => resolve("Hello from Promise!"), 1000);
  });
}

getPromise().then(value => console.log(value)); // 输出：Hello from Promise! (1秒后)

在这个例子中，getPromise函数返回了一个Promise对象。 JS引擎直接返回了这个Promise对象，then方法会在Promise解决后拿到它的值。

3. 没有return语句：返回Promise.resolve(undefined)

如果你的async函数没有return语句，那么它会隐式地返回Promise.resolve(undefined)。

async function doSomething() {
  console.log("Doing something...");
}

doSomething().then(value => console.log("Returned:", value)); // 输出：Doing something... Returned: undefined

在这个例子中，doSomething函数没有return语句，所以它隐式地返回了Promise.resolve(undefined)。

4. 抛出错误：返回Promise.reject(error)

如果在async函数中抛出一个错误，JS引擎会将这个错误包装成一个被拒绝(rejected)的Promise对象。

async function throwError() {
  throw new Error("Something went wrong!");
}

throwError().catch(error => console.error("Caught error:", error)); // 输出：Caught error: Error: Something went wrong!

在这个例子中，throwError函数抛出了一个错误。 JS引擎将这个错误包装成Promise.reject(new Error("Something went wrong!"))，然后catch方法就会捕获到这个被拒绝的Promise。

三、为什么要这么设计？

你可能会问：为什么要这么设计？ 为什么async函数一定要返回Promise对象？

答案很简单：为了更好地处理异步操作。

Promise是JS中处理异步操作的标准方式。 通过将async函数返回的值包装成Promise对象，我们可以使用then、catch等方法来处理异步操作的结果和错误，从而使代码更加清晰和易于维护。

四、async/await的错误处理

在async函数中，我们通常使用try...catch语句来处理错误。

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 fetching data:", error);
    // 可以选择重新抛出错误，让调用者处理
    throw error;
    // 或者返回一个默认值
    // return { error: "Failed to fetch data" };
  }
}

fetchData()
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

在这个例子中，try块中的代码可能会抛出错误（比如fetch请求失败，或者response.json()解析失败）。 如果发生错误，catch块中的代码会被执行，我们可以记录错误信息，或者重新抛出错误，或者返回一个默认值。

五、async函数返回类型的总结

为了方便大家理解，我把async函数的返回类型总结成一个表格：

返回值类型	实际返回的 Promise	说明
普通值 (number, string, object, boolean 等)	Promise.resolve(value)	JS引擎会自动将普通值包装成一个已解决的Promise对象。
Promise对象	直接返回该 Promise	JS引擎不会对 Promise 对象做任何包装，直接返回该 Promise 对象。
没有 return 语句	Promise.resolve(undefined)	JS引擎会隐式地返回一个已解决的 Promise 对象，其值为 undefined。
抛出错误	Promise.reject(error)	JS引擎会将抛出的错误包装成一个被拒绝的 Promise 对象。
await表达式	Promise 对象 (等待 Promise 解决后返回其值)	await 关键字用于等待一个 Promise 对象解决。如果 Promise 解决，await 表达式会返回 Promise 的解决值；如果 Promise 被拒绝，await 表达式会抛出一个错误。

六、一些小贴士

• 始终使用try...catch处理await表达式的错误。 虽然 await 表达式会抛出错误，但如果没有 try...catch 捕获，错误可能会被忽略，导致程序崩溃。
• 避免在async函数中执行耗时的同步操作。 async函数虽然是异步的，但如果其中包含耗时的同步操作，仍然会阻塞事件循环，影响程序的性能。
• 理解 Promise.all、Promise.race 等方法的用法。 这些方法可以帮助你更好地管理多个异步操作。
• 善用async 函数的返回值进行链式调用。 由于 async 函数总是返回 Promise，你可以使用 then 和 catch 进行链式调用，处理异步操作的结果和错误。

七、高级用法：async generator (异步生成器)

除了普通的 async 函数，JS 还支持 async generator (异步生成器)。 异步生成器允许你异步地生成一系列值。 它们使用 async function* 语法定义，并使用 yield 关键字来产生值。

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // 模拟异步操作
    yield i;
  }
}

(async () => {
  for await (const num of generateSequence(1, 5)) {
    console.log(num); // 输出 1, 2, 3, 4, 5 (每隔 500ms)
  }
})();

在这个例子中，generateSequence 是一个异步生成器。 它会异步地产生从 start 到 end 的一系列数字。 for await...of 循环用于迭代异步生成器产生的值。

八、总结

今天，我们深入探讨了JS中async函数的返回类型：Promise<T>。 我们学习了async函数是如何将返回值包装成Promise对象的，以及为什么要这么设计。 我们还讨论了async/await的错误处理，以及一些使用async函数的小贴士。

希望今天的课程能帮助你更好地理解和使用async函数，编写出更加清晰、易于维护的异步代码。

下次有机会，我们再聊聊async/await的更多高级用法，比如如何使用它们来处理并发请求，或者如何使用它们来实现更复杂的异步流程控制。

感谢大家的参与，下课！