手写Promise并且手写async/await的实现原理手写实现

async/await的实现原理手写实现

这里为了方便理解，将promise和async/await的手写实现分开来介绍。

手动实现Promise

1. 首先，要定义一个Promise的构造函数，它接收一个executor函数作为参数，executor函数有两个参数，resolve和reject，用来改变Promise的状态。

class MyPromise {
  constructor(executor) {
    this.status = "pending";
    this.value = undefined;
    this.reason = undefined;
    const resolve = (value) => {
      if (this.status === "pending") {
        this.status = "fulfilled";
        this.value = value;
      }
    };
    const reject = (reason) => {
      if (this.status === "pending") {
        this.status = "rejected";
        this.reason = reason;
      }
    };
    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }
}

1. 接下来，我们要定义Promise的then方法，它接收两个函数作为参数，onFulfilled和onRejected，分别用来处理Promise的fulfilled和rejected状态。

class MyPromise {
  // constructor代码省略
  then(onFulfilled, onRejected) {
    if (this.status === "fulfilled") {
      onFulfilled(this.value);
    }
    if (this.status === "rejected") {
      onRejected(this.reason);
    }
  }
}

1. 最后，我们要实现Promise的链式调用，也就是then方法可以返回一个新的Promise对象。

class MyPromise {
  // constructor代码省略
  then(onFulfilled, onRejected) {
    const newPromise = new MyPromise((resolve, reject) => {
      if (this.status === "fulfilled") {
        try {
          const x = onFulfilled(this.value);
          if (x instanceof MyPromise) {
            x.then(resolve, reject);
          } else {
            resolve(x);
          }
        } catch (error) {
          reject(error);
        }
      }
      if (this.status === "rejected") {
        try {
          const x = onRejected(this.reason);
          if (x instanceof MyPromise) {
            x.then(resolve, reject);
          } else {
            reject(x);
          }
        } catch (error) {
          reject(error);
        }
      }
    });
    return newPromise;
  }
}

现在我们手动实现了一个Promise，接下来我们来手动实现async/await。

手动实现async/await

Async/await 是 ES2017 引入的异步编程新特性，可以使异步代码看起来像同步代码，提高代码的可读性和可维护性。本文将手写实现 async/await，详细介绍其原理和实现过程。

原理

async/await 的原理就是将异步操作转化为同步操作，将异步代码流程化、顺序化。async/await 实际上是 Generator 函数和 Promise 的语法糖，其内部实现了 Generator 函数和 Promise 的自动执行和错误处理。

实现步骤

1. 实现 async 函数

async 函数实际上是一个返回 Promise 的函数。在函数内部使用 Promise.resolve() 将返回值转化为 Promise 对象，可以使用 await 关键字获取 Promise 对象的返回值。

function asyncFunction() {
  return Promise.resolve('asyncFunction');
}

asyncFunction().then(console.log); // 输出 asyncFunction

2. 实现 await 关键字

await 关键字可以暂停 async 函数的执行，等待 Promise 对象的状态改变后再继续执行。实现 await 关键字需要使用 Promise 对象的 then 方法来实现。当 Promise 对象状态为 resolved 时，将 Promise 对象的返回值传递给下一个 async 函数；当 Promise 对象状态为 rejected 时，抛出错误。

function asyncFunction() {
  return Promise.resolve('asyncFunction');
}

async function test() {
  const result = await asyncFunction();
  console.log(result); // 输出 asyncFunction
}

test();

3. 实现错误处理

当 Promise 对象状态为 rejected 时，抛出错误，需要使用 try…catch 语句捕获错误并处理。

function asyncFunction() {
  return Promise.reject(new Error('asyncFunction error'));
}

async function test() {
  try {
    const result = await asyncFunction();
    console.log(result);
  } catch (error) {
    console.error(error.message); // 输出 asyncFunction error
  }
}

test();

总结

async/await 是一种简化异步操作的语法糖，使异步代码更加易读易维护。掌握其原理和实现步骤有助于更好地理解其使用方法和优化异步代码。