手写实现Async、Await、Generator的核心逻辑，以一种深刻的视角看待JavaScript

2023-09-15 20:11:15

Async/Await

Async/Await是ES8中引入的异步编程新特性，它允许我们使用同步的编写风格来编写异步代码。

实现Async/Await的核心思想是使用Generator函数和Promise对象。

Generator函数是一个特殊的函数，它可以暂停执行，并在稍后继续执行。当Generator函数遇到yield时，它会暂停执行，并将当前上下文返回。当Generator函数再次被调用时，它会从上次暂停的地方继续执行。

Promise对象是一个表示异步操作的占位符。当异步操作完成时，Promise对象会被解析，并返回结果。

Async/Await函数就是一种特殊的Generator函数，它可以自动处理Promise对象。当Async/Await函数遇到await关键字时，它会暂停执行，并等待Promise对象被解析。当Promise对象被解析后，Async/Await函数会继续执行，并将Promise对象的返回值作为结果返回。

Generator

Generator函数是一种特殊的函数，它可以暂停执行，并在稍后继续执行。当Generator函数遇到yield关键字时，它会暂停执行，并将当前上下文返回。当Generator函数再次被调用时，它会从上次暂停的地方继续执行。

Generator函数的实现非常简单，它就是一个普通的函数，只不过在函数内部使用了yield关键字。

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

这个Generator函数可以被多次调用，每次调用都会返回一个不同的值。

const generator = generatorFunction();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

实现Async/Await和Generator的核心逻辑

现在我们知道了Async/Await和Generator函数的实现原理，我们就可以着手实现Async/Await和Generator的核心逻辑了。

实现Async/Await的核心思想是使用Generator函数和Promise对象。

首先，我们需要创建一个Generator函数来包裹我们的异步代码。然后，我们需要创建一个Promise对象来表示我们的异步操作。当异步操作完成时，Promise对象会被解析，并返回结果。

最后，我们需要使用Async/Await函数来调用Generator函数。当Async/Await函数遇到await关键字时，它会暂停执行，并等待Promise对象被解析。当Promise对象被解析后，Async/Await函数会继续执行，并将Promise对象的返回值作为结果返回。

async function asyncFunction() {
  const result = await Promise.resolve(1);
  return result;
}

asyncFunction().then(result => {
  console.log(result); // 1
});

这个Async/Await函数会等待Promise对象被解析，然后返回Promise对象的返回值。

实现Generator函数的核心思想是使用yield关键字。

首先，我们需要创建一个Generator函数来包裹我们的代码。然后，我们需要在Generator函数内部使用yield关键字来暂停执行。当Generator函数再次被调用时，它会从上次暂停的地方继续执行。

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generatorFunction();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }