likes
comments
collection
share

手写代码：实现一个ts版的Promise！如何使用 Typescript 实现 Promise，包括 Promise t

作者站长头像
站长
· 阅读数 24

Promise API 应该算是写前端的同学使用最多的东西了，今天就来使用 ts 来实现一个 Promise，在手写实现的过程里，可以更加有助于我们对于 Promise 的理解，对以后在工作中使用到 Promise 也会更有帮助！

在这篇文章中我们将一步步实现一个 ts 版的 Promise，包括的 API 如下：

  • 创建 Promise: new Promise
  • then 方法
  • then 方法级联调用
  • 异步的 Promise
  • Promise.all 方法

一、环境配置

1.使用 npm init -y 初始化一个项目 2.安装 Typescript（我使用的 ts 版本为： "typescript": "^5.5.4"） 3.在 package.json 文件中创建一个 tsc 命令，使用 ts-node 用来编译 ts 文件

{
  "name": "ts-promise",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "tsc": "ts-node ./src/test.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^5.5.4"
  }
}

4.创建 src 文件夹，并在 src 文件夹中新建 index.ts，test.ts，type.ts 文件 结构如下：

手写代码：实现一个ts版的Promise！如何使用 Typescript 实现 Promise，包括 Promise t

index.ts 为手写的 Promise 源码文件 type.ts 为手写 Promise 需要的类型文件 test.ts 为测试代码文件

二、实现 Promise 代码

  • 创建 Promise 代码实现

在创建 Promise 之前，先看一下在我们正常使用 Promise 的时候，是如何进行创建的：

const promise = new Promise((resolve, reject) => {});

从上面的使用代码可以看出，我们只是 new 了一个 Promise 对象，并且传入一个函数，函数接受两个参数，resolve 和 reject，那么我们就可以先定义这几个类型：

// type.ts
type ResolveType = (value: any) => void;
type RejectType = (reason: any) => void;

type Executor = (resolve: ResolveType, reject: RejectType) => void;

export { ResolveType, RejectType, Executor };

接下来根据创建 Promise 的方式开始实现 Promise 类：

// index.ts
import { Executor, RejectType, ResolveType } from "./types";

export default class Promise {
  public resolve: ResolveType;
  public reject: RejectType;
  public status: "pending" | "fulfilled" | "rejected";

  public resolveValue: any;
  public rejectValue: any;

  constructor(executor: Executor) {
    this.status = "pending";

    this.resolve = (value: any) => {
      if (this.status === "pending") {
        this.status = "fulfilled";
        this.resolveValue = value;
      }
    };
    this.reject = (value: any) => {
      if (this.status === "pending") {
        this.status = "rejected";
        this.rejectValue = value;
      }
    };

    executor(this.resolve, this.reject);
  }
}

创建 Promise 其实不难理解，只是在 Promise 的构造函数中创建出两个方法，并且在 Promise 类中记录下 resolve 和 reject 的值，以及这个 Promise 的状态。因为 Promise 的状态是不可逆转的，所以需要增加对 status 的判断。

  • then 方法实现

还是先看一下 then 方法的使用方式：

const promise = new Promise((resolve, reject) => {});

promise.then(
  (res1) => {
    console.log("res: ", res1);
  },
  (err1) => {
    console.log("err1", err1);
  }
);

可以看到 then 方法实际上接受两个函数，当我们调用 resolve 的时候，会执行 then 方法中的第一个函数，调用 reject 时，会执行第二个函数，那么 Promise 的 then 方法就可以实现了：

import { Executor, RejectType, ResolveType } from "./types";

export default class Promise {
  public resolve: ResolveType;
  public reject: RejectType;
  public status: "pending" | "fulfilled" | "rejected";

  public resolveValue: any;
  public rejectValue: any;

  constructor(executor: Executor) {
    this.status = "pending";

    this.resolve = (value: any) => {
      if (this.status === "pending") {
        this.status = "fulfilled";
        this.resolveValue = value;
      }
    };
    this.reject = (value: any) => {
      if (this.status === "pending") {
        this.status = "rejected";
        this.rejectValue = value;
      }
    };

    executor(this.resolve, this.reject);
  }

  then(onResolved: ResolveType, onRejected: RejectType) {
    if (this.status === "fulfilled") {
      onResolved(this.resolveValue);
    }
    if (this.status === "rejected") {
      onRejected(this.rejectValue);
    }
  }
}

  • then 方法级联调用

在使用 Promise 的 then 函数时，then 函数可以进行级联调用，使用方式如下：

const promise = new Promise((resolve, reject) => {
  resolve(1);
  // reject(2);
});

promise
  .then(
    (res1) => {
      console.log("res: ", res1);
      return "ok1";
    },
    (err1) => {
      console.log("err1", err1);
    }
  )
  .then(
    (res2) => {
      console.log("res2", res2);
      return "ok2";
    },
    (err2) => {
      console.log("err2", err2);
    }
);

这种级联调用实际上是 then 方法返回了一个新的 Promise 对象，并且将 上次的 resolve 或者 reject 的执行结果给传递到新的 Promise 对象中：

then(onResolved: ResolveType, onRejected: RejectType) {
    let result: any;
    return new Promise((resolve, reject) => {
      if (this.status === "fulfilled") {
        result = onResolved(this.resolveValue);
        resolve(result);
      }
      if (this.status === "rejected") {
        result = onRejected(this.rejectValue);
        reject(result);
      }
    });
  }

  • 异步的 Promise

在实际项目中使用 Promise，有可能会遇到在执行一个异步操作后，再执行 resolve 或者 reject 方法，那么就需要修改上面的 Promise 代码来实现： 比如，测试类中要执行一个耗时的异步任务，执行 resolve 函数：

import Promise from "./index";

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("异步的数据！");
  }, 1000);
});

promise.then(
  (res1) => {
    console.log("res: ", res1);
    return "ok1";
  },
  (err1) => {
    console.log("err1", err1);
  }
);

执行测试代码后，发现并没有像同步执行 resolve 时那样，将数据打印出来，原因就在于，在我们写的 Promise 类中，并没有处理异步的情况，先执行了 then 函数，然后才执行 resolve 函数，这样 then 函数执行的时候，我们还没有给 resolveValue 赋值！

所以，想要让我们写的 Promise 支持异步，我们就需要修改一下 Promise 类中的代码！

首先，在 Promise 中增加两个数组，用来保存 resolve 函数和 reject 函数：

  public resolveCallback: any[] = [];
  public rejectCallback: any[] = [];

然后，在 then 方法中增加对 pending 状态的判断，如果是 pending 状态，则把 resolve 和 reject 函数放到数组中：

  then(onResolved: ResolveType, onRejected: RejectType) {
    console.log("then");

    let result: any;
    return new Promise((resolve, reject) => {
      if (this.status === "fulfilled") {
        result = onResolved(this.resolveValue);
        resolve(result);
      }

      if (this.status === "rejected") {
        result = onRejected(this.rejectValue);
        reject(result);
      }

      if (this.status === "pending") {
        this.resolveCallback.push(() => {
          result = onResolved(this.resolveValue);
          if (isPromise(result)) {
            result.then(
              (res) => {
                resolve(res);
              },
              (err) => {
                reject(err);
              }
            );
          } else {
            resolve(result);
          }
        });

        this.rejectCallback.push(() => {
          result = onRejected(this.rejectValue);
          if (isPromise(result)) {
            result.then(
              (res) => {
                resolve(res);
              },
              (err) => {
                reject(err);
              }
            );
          } else {
            reject(result);
          }
        });
      }
    });
  }

在执行 resolve 或者 reject 方法的时候，使用 foreach 循环执行 resolveCallback 或者 rejectCallback： 完整代码如下：

import { Executor, RejectType, ResolveType } from "./types";

function isPromise(value: any): value is Promise {
  // 是对象并且对象中有 then 方法，则认为是 Promise
  return value && typeof value === "object" && typeof value.then === "function";
}

export default class Promise {
  public resolve: ResolveType;
  public reject: RejectType;
  public status: "pending" | "fulfilled" | "rejected";

  public resolveValue: any;
  public rejectValue: any;

  public resolveCallback: any[] = [];
  public rejectCallback: any[] = [];

  constructor(executor: Executor) {
    this.status = "pending";

    this.resolve = (value: any) => {
      console.log("resolve: ", value);

      if (this.status === "pending") {
        this.status = "fulfilled";
        this.resolveValue = value;
        this.resolveCallback.forEach((fn) => fn());
      }
    };
    this.reject = (value: any) => {
      if (this.status === "pending") {
        this.status = "rejected";
        this.rejectValue = value;
        this.rejectCallback.forEach((fn) => fn());
      }
    };

    executor(this.resolve, this.reject);
  }

  then(onResolved: ResolveType, onRejected: RejectType) {
    console.log("then");

    let result: any;
    return new Promise((resolve, reject) => {
      if (this.status === "fulfilled") {
        result = onResolved(this.resolveValue);
        resolve(result);
      }

      if (this.status === "rejected") {
        result = onRejected(this.rejectValue);
        reject(result);
      }

      if (this.status === "pending") {
        this.resolveCallback.push(() => {
          result = onResolved(this.resolveValue);
          if (isPromise(result)) {
            result.then(
              (res) => {
                resolve(res);
              },
              (err) => {
                reject(err);
              }
            );
          } else {
            resolve(result);
          }
        });

        this.rejectCallback.push(() => {
          result = onRejected(this.rejectValue);
          if (isPromise(result)) {
            result.then(
              (res) => {
                resolve(res);
              },
              (err) => {
                reject(err);
              }
            );
          } else {
            reject(result);
          }
        });
      }
    });
  }
}

  • Promise.all 方法

还是先看 Promise.all 方法的使用：

const promise1 = new Promise((resolve, reject) => {
  resolve("ok1");
});

const promise2 = new Promise((resolve, reject) => {
  resolve("ok2");
});

const promise3 = new Promise((resolve, reject) => {
  resolve("ok3");
});

Promise.all([promise1, promise2, promise3]).then(
  (res) => {
    console.log("res: ", res);
  },
  (err) => {
    console.log("err: ", err);
  }
);

可以看到，Promise.all 实际上是一个静态方法，接收一个 promise 的数组，返回一个 Promise 对象，并且会把传递的 promise 数组里每一个 promise 的执行结果，放到一个数组里返回，所以，可以在 Promise 类中这样实现：

  static all(promises: Promise[]) {
    return new Promise((resolve, reject) => {
      const resolveArray: any[] = [];
      promises.forEach((p, index) => {
        p.then(
          (res) => {
            processData(res, index);
          },
          (err) => {
            reject(err);
            return;
          }
        );
      });

      function processData(resolveData: any, index: number) {
        resolveArray[index] = resolveData;
        if (index == promises.length - 1) {
          resolve(resolveArray);
          return;
        }
      }
    });
  }

Promise.all 方法的实现关键在于要循环执行 promise，将执行结果按顺序放到结果的数组中，然后等到所有的 promise 都执行完成后，一起返回。

总结

通过实现 Promise 的关键 API，可以明白在 Promise 的底层大概是一个怎样的逻辑，可以加深我们对于 Promise API 的理解。

转载自:https://juejin.cn/post/7397640923347599399
评论
请登录