理解 `async` 函数的自动 Promise 封装与 `await` 的暂停

欢迎来到异步魔法学院：揭秘 Async/Await 的自动 Promise 封装与暂停大法！🧙‍♂️✨

各位未来的编程魔法师们，欢迎来到异步魔法学院！今天，我们将一起揭开 JavaScript 中最优雅、最强大的异步编程利器——async/await 的神秘面纱。准备好摆脱回调地狱，迎接清晰、可读性极强的异步代码了吗？系好安全带，我们的魔法之旅即将开始！🚀

第一章：Promise 的基础咒语：异步的基石

在深入 async/await 的奇妙世界之前，我们先来回顾一下它的基石——Promise。可以把 Promise 想象成一个承诺，承诺将来会给你一个值。这个值要么是成功的（resolved），要么是失败的（rejected）。

为什么需要 Promise？

想象一下，你要从服务器获取一些数据。这是一个异步操作，因为你不知道服务器什么时候会给你数据。如果使用传统的回调函数，代码可能会变成这样：

getData(function(data) {
  processData(data, function(processedData) {
    displayData(processedData, function() {
      console.log("完成!");
    });
  });
});

看起来是不是像俄罗斯套娃一样？😱 这就是臭名昭著的回调地狱！Promise 的出现，就是为了解决这个问题，让异步代码更加优雅、易于管理。

Promise 的三种状态：

pending (等待中): Promise 刚创建的时候，处于等待状态。
fulfilled (已成功): 异步操作成功完成，Promise 带着成功的结果。
rejected (已失败): 异步操作失败，Promise 带着失败的原因。

Promise 的基本用法：

const myPromise = new Promise((resolve, reject) => {
  // 模拟一个异步操作，比如请求数据
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve("成功啦！randomNumber: " + randomNumber); // 成功时调用 resolve
    } else {
      reject("失败啦！randomNumber: " + randomNumber); // 失败时调用 reject
    }
  }, 1000);
});

myPromise
  .then(value => {
    console.log("Promise 成功:", value);
    return value; // 可以链式调用，返回一个新的 Promise 或者一个值
  })
  .then(value => {
    console.log("第二个 then:", value); // 上一个 then 的返回值
  })
  .catch(error => {
    console.error("Promise 失败:", error);
  })
  .finally(() => {
    console.log("无论成功还是失败，都会执行我！");
  });

new Promise()：创建一个新的 Promise 对象。
resolve()：将 Promise 的状态设置为 fulfilled，并传递成功的结果。
reject()：将 Promise 的状态设置为 rejected，并传递失败的原因。
.then()：当 Promise 状态变为 fulfilled 时，执行的回调函数。可以链式调用。
.catch()：当 Promise 状态变为 rejected 时，执行的回调函数。
.finally()：无论 Promise 成功还是失败，都会执行的回调函数。

表格总结 Promise 的方法：

方法	作用
`new Promise()`	创建一个新的 Promise 对象
`resolve()`	将 Promise 的状态设置为 fulfilled，并传递成功的结果。
`reject()`	将 Promise 的状态设置为 rejected，并传递失败的原因。
`.then()`	当 Promise 状态变为 fulfilled 时，执行的回调函数。可以链式调用。
`.catch()`	当 Promise 状态变为 rejected 时，执行的回调函数。
`.finally()`	无论 Promise 成功还是失败，都会执行的回调函数。

第二章：Async 函数：自动 Promise 封装术

现在，让我们进入 async 函数的世界！async 函数就像一个自动 Promise 工厂，它能将你的普通函数转化为一个 Promise 对象，让你的异步代码看起来像同步代码一样简洁。

async 的语法：

async function myFunction() {
  // 异步操作的代码
}

只需要在 function 关键字前面加上 async 关键字，这个函数就变成了一个 async 函数。

async 函数的特性：

自动 Promise 封装： async 函数会自动将返回值封装成一个 Promise 对象。如果函数返回一个值，那么这个值会被 Promise.resolve() 封装。如果函数抛出一个错误，那么这个错误会被 Promise.reject() 封装。

async function returnNumber() {
  return 123;
}

returnNumber().then(value => {
  console.log(value); // 输出: 123
});

async function throwError() {
  throw new Error("出错了！");
}

throwError().catch(error => {
  console.error(error.message); // 输出: 出错了！
});

await 的暂停大法： await 关键字只能在 async 函数内部使用。它的作用是暂停 async 函数的执行，直到一个 Promise 对象的状态变为 fulfilled。当 Promise 状态变为 fulfilled 时，await 会返回 Promise 的结果。
```
async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return data;
}

fetchData().then(data => {
  console.log(data); // 输出: { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
});
```
在这个例子中，await fetch() 会暂停 fetchData() 函数的执行，直到 fetch() 返回的 Promise 对象状态变为 fulfilled。然后，await response.json() 会再次暂停，直到 response.json() 返回的 Promise 对象状态变为 fulfilled。这样，我们就可以像写同步代码一样，顺序地获取数据。

async/await 的优势：

代码更简洁： 摆脱了回调地狱，代码更加清晰易懂。
可读性更高： 代码的执行顺序更加直观，更容易理解。

错误处理更方便： 可以使用 try...catch 语句来捕获异步操作中的错误。

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("获取数据失败:", error);
  }
}

第三章：Await 的深度解析：暂停的艺术

await 关键字是 async/await 的灵魂所在。它就像一个魔法暂停按钮，让你的异步代码看起来像同步代码一样。

await 的作用：

暂停执行： await 关键字会暂停 async 函数的执行，直到一个 Promise 对象的状态变为 fulfilled。
返回结果： 当 Promise 对象的状态变为 fulfilled 时，await 会返回 Promise 的结果。
只能在 async 函数中使用： await 关键字只能在 async 函数内部使用。如果在非 async 函数中使用 await，会抛出一个错误。

await 的使用场景：

等待异步操作完成： 最常见的场景是等待异步操作完成，比如请求数据、读取文件等。
```
async function readFile(filename) {
  const data = await fs.promises.readFile(filename, "utf8");
  return data;
}
```

处理多个异步操作： 可以使用 await 关键字来顺序地处理多个异步操作。

async function processData() {
  const data1 = await fetchData1();
  const data2 = await fetchData2(data1);
  const data3 = await fetchData3(data2);
  return data3;
}

并行执行异步操作： 如果多个异步操作之间没有依赖关系，可以使用 Promise.all() 或者 Promise.allSettled() 来并行执行它们，提高效率。
```
async function processData() {
  const [data1, data2, data3] = await Promise.all([
    fetchData1(),
    fetchData2(),
    fetchData3()
  ]);
  return [data1, data2, data3];
}
```
Promise.all() 和 Promise.allSettled() 的区别：
- Promise.all()：如果其中一个 Promise 对象的状态变为 rejected，那么整个 Promise.all() 都会失败，并抛出一个错误。
- Promise.allSettled()：无论 Promise 对象的状态是 fulfilled 还是 rejected，Promise.allSettled() 都会等待所有的 Promise 对象完成，并返回一个包含每个 Promise 对象状态和结果的数组。

表格总结 await 的使用场景：

使用场景	示例代码
等待异步操作完成	`const data = await fs.promises.readFile(filename, "utf8");`
处理多个异步操作	`const data2 = await fetchData2(data1);`
并行执行异步操作	`const [data1, data2, data3] = await Promise.all([fetchData1(), fetchData2(), fetchData3()]);`

第四章：Async/Await 的错误处理：优雅地应对意外

即使是魔法师，也会遇到意外情况。在异步编程中，错误处理至关重要。async/await 提供了简洁的错误处理机制，让我们可以优雅地应对各种意外。

使用 try...catch 语句：

async/await 允许我们使用 try...catch 语句来捕获异步操作中的错误。这使得错误处理代码更加清晰易懂。

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("获取数据失败:", error);
    // 可以选择抛出错误，或者返回一个默认值
    throw error; // 将错误传递给调用者
    // return null; // 返回一个默认值
  }
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("最终捕获到错误:", error);
  });

在这个例子中，如果 fetch() 或者 response.json() 抛出一个错误，catch 块中的代码会被执行。我们可以在 catch 块中记录错误信息，或者采取其他的补救措施。

错误处理的最佳实践：

尽量使用 try...catch 语句： 确保你的 async 函数能够捕获所有可能的错误。
记录错误信息： 记录错误信息可以帮助你诊断问题。
选择合适的错误处理策略： 根据你的应用场景，选择合适的错误处理策略。你可以选择抛出错误，或者返回一个默认值。
将错误传递给调用者： 如果你无法处理错误，可以将错误传递给调用者。

第五章：Async/Await 的高级技巧：成为异步大师

掌握了 async/await 的基础知识，我们就可以探索一些高级技巧，成为真正的异步大师。

1. 结合 Promise.race() 使用：

Promise.race() 接受一个 Promise 数组作为参数，并返回一个 Promise 对象。这个 Promise 对象的状态会和数组中第一个改变状态的 Promise 对象保持一致。

async function fetchDataWithTimeout(url, timeout) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('请求超时')), timeout)
    )
  ]);
}

async function getData() {
  try {
    const response = await fetchDataWithTimeout("https://jsonplaceholder.typicode.com/todos/1", 3000);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("获取数据失败:", error);
  }
}

getData();

在这个例子中，如果 fetch() 在 3 秒内没有返回结果，Promise.race() 会返回一个 rejected 的 Promise 对象，从而抛出一个错误。

2. 使用 IIFE (Immediately Invoked Function Expression) 创建顶层 await：

在 ES 模块中，我们可以在顶层使用 await 关键字。但是在 CommonJS 模块中，我们不能在顶层使用 await 关键字。为了解决这个问题，我们可以使用 IIFE 来创建一个 async 函数，并在其中使用 await 关键字。

(async () => {
  const data = await fetchData();
  console.log(data);
})();

3. 结合 generators 使用 (不常用，了解即可)：

虽然 async/await 已经足够强大，但我们仍然可以结合 generators 来实现更复杂的异步控制流程。

function* myGenerator() {
  const data1 = yield fetchData1();
  const data2 = yield fetchData2(data1);
  const data3 = yield fetchData3(data2);
  return data3;
}

async function runGenerator(generator) {
  let result = generator.next();
  while (!result.done) {
    try {
      result = generator.next(await result.value);
    } catch (error) {
      generator.throw(error);
    }
  }
  return result.value;
}

runGenerator(myGenerator())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

第六章：Async/Await 的优缺点：权衡利弊

任何技术都有其优缺点，async/await 也不例外。让我们来权衡一下它的利弊。

优点：

代码更简洁： 摆脱了回调地狱，代码更加清晰易懂。
可读性更高： 代码的执行顺序更加直观，更容易理解。
错误处理更方便： 可以使用 try...catch 语句来捕获异步操作中的错误。
调试更简单： 可以像调试同步代码一样调试异步代码。

缺点：

需要 JavaScript 引擎的支持： async/await 是 ES2017 中引入的新特性，需要 JavaScript 引擎的支持。对于一些老旧的浏览器，可能需要使用 Babel 等工具进行转译。
过度使用可能会影响性能： 如果在循环中使用 await 关键字，可能会导致性能问题。尽量使用 Promise.all() 或者 Promise.allSettled() 来并行执行异步操作。
容易阻塞主线程： 如果 async 函数中包含耗时的同步操作，可能会阻塞主线程，影响用户体验。尽量将耗时的同步操作放在 Web Worker 中执行。

表格总结 Async/Await 的优缺点：

优点	缺点
代码更简洁	需要 JavaScript 引擎的支持
可读性更高	过度使用可能会影响性能
错误处理更方便	容易阻塞主线程 (如果包含耗时的同步操作)
调试更简单

结语：异步魔法的未来

恭喜你，完成了异步魔法学院的课程！你现在已经掌握了 async/await 的自动 Promise 封装与暂停大法。希望你能在未来的编程实践中，灵活运用这些知识，编写出优雅、高效的异步代码。记住，编程就像魔法一样，只要你不断学习、不断实践，就能创造出无限的可能！✨ 让我们一起期待异步编程的未来，创造更美好的互联网世界！ 🌎😊