从Promise到async/await：前端异步编程的演进之路

2023-03-13 21:47:39

异步编程：揭开 Promise、Generator 和 Async/Await 的神秘面纱

Promise

Promise 就像一个小小的承诺，它保证在异步操作完成时提供结果。想象一下，你让你的朋友帮你取回一些东西。他们会给你一个承诺，告诉你会在特定时间得到它。类似地，Promise 表示一个异步操作，一旦操作完成，它将提供结果（无论结果是成功还是失败）。

// Promise 实例
const promise = new Promise((resolve, reject) => {
  // 异步操作
});

promise.then((result) => {
  // 操作成功后执行
}, (error) => {
  // 操作失败后执行
});

Generator

Generator 就像一个暂停按钮，它允许你在需要时暂停和恢复异步操作的执行。这就像在烹饪过程中，你可以随时暂停搅拌或调味，然后再回来继续操作。同样，Generator 可以让你随时中断异步操作的执行，然后再返回继续执行。

// Generator 函数
function* generator() {
  // 异步操作
  yield;
}

// Generator 实例
const gen = generator();
gen.next(); // 开始执行
// ...稍后
gen.next(); // 继续执行

Async/Await

Async/await 是 JavaScript 中的一对语法糖，它们让你能够使用同步风格编写异步代码。想象一下，你正在给某人写一封信，你使用 pen 和 ink，然后在每一行完成后等待墨水干。async/await 就类似于这种情况，它允许你编写异步代码，但无需显式使用回调或 Promise。

// 异步函数
async function example() {
  // 异步操作
  const result = await operation();
}

异同点

状态： Promise 具有明确的状态（pending、fulfilled、rejected），而 Generator 和 async/await 则没有。
暂停和恢复： Generator 可以暂停和恢复执行，而 Promise 和 async/await 则不行。
语法： Promise 和 Generator 使用回调函数，而 async/await 使用同步风格。
易用性： async/await 被认为比 Promise 和 Generator 更容易使用。

选择合适的技术

选择哪种技术取决于你的具体需求：