带你领略JavaScript异步编程的魅力

2023-01-13 15:52:00

解锁JavaScript异步编程，释放开发潜能

在JavaScript的世界里，异步编程是一个不容忽视的强大工具，它能让你写出高效、优雅的非阻塞代码。掌握异步编程，无疑是成为合格JavaScript工程师的必备技能。

Promise：静候异步结果

Promise就像一个贴心的管家，帮助你管理异步操作。当你在执行异步任务时，你可以让它暂时搁置，先去做其他事情。等到异步操作完成，Promise会回来通知你结果，就像一位咖啡师告诉你，你的咖啡已经制作完毕。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('你的咖啡好了');
  }, 5000);
});

promise.then((result) => {
  console.log(result); // 输出: 你的咖啡好了
});

Generator：让异步代码变得可控

Generator是一个神奇的魔法师，可以暂停和恢复执行的函数。它让你将异步操作写成同步代码一样，就像你可以随时暂停一部电影，去做点别的事情，再回来继续观看。

function* coffeeMaker() {
  const grindBeans = yield grindCoffeeBeans();
  const brewCoffee = yield brewCoffeeWithWater(grindBeans);
  return brewCoffee;
}

function grindCoffeeBeans() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('研磨咖啡豆');
    }, 1000);
  });
}

function brewCoffeeWithWater(groundBeans) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('用研磨的咖啡豆冲泡咖啡');
    }, 2000);
  });
}

const coffee = coffeeMaker();
coffee.next(); // 暂停执行
coffee.next(coffee.next().value); // 继续执行
coffee.next(coffee.next().value); // 最终执行完毕

async/await：让异步编程更轻松

async/await是JavaScript异步编程的超级英雄，它让Generator变得更容易使用。就像你拥有了一个遥控器，只需按几个按钮就能控制电视，async/await让你用简洁的方式编写异步代码。

async function makeCoffee() {
  const grindBeans = await grindCoffeeBeans();
  const brewCoffee = await brewCoffeeWithWater(grindBeans);
  return brewCoffee;
}

makeCoffee().then((result) => {
  console.log(result); // 输出: 用研磨的咖啡豆冲泡咖啡
});