异步语法糖，谁是真正大佬？

async 和 yield 的执行过程

为了更好地理解 async 和 yield 的区别，我们先来看一个简单的例子。假设有一个异步任务需要花 3s 才能执行完，执行完后，执行回调操作。

使用 async 语法糖来编写这段代码如下：

async function asyncTask() {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 3000);
  });

  console.log('异步任务执行完毕');
}

asyncTask();

使用 yield 语法糖来编写这段代码如下：

function* generatorTask() {
  yield new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 3000);
  });

  console.log('异步任务执行完毕');
}

const task = generatorTask();
task.next();

通过对比两段代码的执行过程，可知，yield 后面的异步任务执行完后，需要手动执行 next 方法，才能接着执行 yield 下面的回调操作，await 后面的异步任务执行完后，可以自动执行 yield 下面的回调操作。

async 和 yield 的本质区别

从上面的例子中，我们可以看出，async 和 yield 的本质区别在于：

• async 是一个语法糖，它可以让代码看起来像同步代码一样执行，但实际上，它内部还是使用异步机制来执行代码。
• yield 是一个生成器函数，它可以暂停函数的执行，并在需要的时候继续执行。

async 和 yield 的适用场景

那么，async 和 yield 分别适用于哪些场景呢？

• async 适用于需要执行异步任务，但又不想让代码看起来太复杂的场景。
• yield 适用于需要暂停函数的执行，并在需要的时候继续执行的场景。

总结

async 和 yield 都是 JavaScript 中的异步语法糖，它们都可以让代码看起来像同步代码一样执行。但实际上，它们在底层的工作原理却大不相同。async 是一个语法糖，它可以让代码看起来像同步代码一样执行，但实际上，它内部还是使用异步机制来执行代码。yield 是一个生成器函数，它可以暂停函数的执行，并在需要的时候继续执行。async 适用于需要执行异步任务，但又不想让代码看起来太复杂的场景。yield 适用于需要暂停函数的执行，并在需要的时候继续执行的场景。