自定义封装Promise类

最新推荐文章于 2024-04-05 14:04:17 发布

javscp_q

最新推荐文章于 2024-04-05 14:04:17 发布

阅读量145

点赞数 1

分类专栏：前端基础文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/javcp_q/article/details/117790926

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

自定义封装Promise类的练习以及笔记

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MyPromise</title>
  </head>
  <body>
    <script>
      class Promise {
        constructor(executor) {
          this.promiseState = "pending"; //pending/fulfilled/rejected
          this.promiseResult = undefined;
          this.callbacks = []; // 储存then()方法的回调函数，因为一个Promise对象可多次调用then()方法，所以用数组储存
          // 声明的函数中this指向改变
          const that = this;
          try {
            // 同步执行回调函数（调用执行器）
            executor(resolve, reject);
          } catch (e) {
            // 若执行器抛出异常，则会得到失败的Promise对象
            reject(e);
          }
          // 声明resolve函数
          function resolve(value) {
            if (that.promiseState == "pending") {
              that.promiseState = "fulfilled";
              that.promiseResult = value;
              setTimeout(() => {
                // 若执行器中是异步操作，在此执行then()方法的回调函数
                for (let item of that.callbacks) {
                  item.onResolve();
                }
              });
            }
          }
          // 声明reject函数
          function reject(error) {
            if (that.promiseState == "pending") {
              that.promiseState = "rejected";
              that.promiseResult = error;
              setTimeout(() => {
                // 若执行器中是异步操作，在此执行then()方法的回调函数
                for (let item of that.callbacks) {
                  item.onReject();
                }
              });
            }
          }
        }
        then(onResolve, onReject) {
          // then()方法返回一个新的Promise对象，根据回调函数的返回值的状态设置新的Promise对象的状态和值
          return new Promise((resolve, reject) => {
            // 处理onResolve()为undefined的情况
            if (typeof onResolve !== "function") {
              onResolve = value => {
                return value;
              };
            }
            // 处理onReject()为undefined的情况
            if (typeof onReject !== "function") {
              onReject = error => {
                throw error;
              };
            }
            // 声明的函数中this指向改变
            const that = this;
            // 若执行器中是同步操作，则resolve()函数与reject()函数会在then()方法之前执行，Promise对象（this）状态已经改变
            // 若执行器中是异步操作，则resolve()函数与reject()函数会在then()方法之后执行，Promise对象（this）状态没有改变
            if (this.promiseState == "pending") {
              // Promise对象（this）状态没有改变，需要储存then()方法的回调函数，在Promise对象（this）状态改变后再执行
              this.callbacks.push({
                onResolve: value => {
                  handle(onResolve);
                },
                onReject: error => {
                  handle(onReject);
                }
              });
            } else if (this.promiseState == "fulfilled") {
              // 异步执行then()方法的回调函数
              setTimeout(() => {
                handle(onResolve);
              });
            } else if (this.promiseState == "rejected") {
              // 异步执行then()方法的回调函数
              setTimeout(() => {
                handle(onReject);
              });
            }
            // 处理then()方法的回调函数的返回值（result）
            function handle(callback) {
              try {
                // 根据调用then()方法的Promise对象的状态不同执行不同的回调函数
                let result = callback(that.promiseResult);
                if (result instanceof Promise) {
                  // 若result是Promise对象，则通过调用then()方法判断result的状态，根据result的状态设置新的Promise对象的状态和值
                  result.then(
                    value => {
                      resolve(value);
                    },
                    error => {
                      reject(error);
                    }
                  );
                } else {
                  // 若result是非Promise对象，则直接通过resolve()方法设置新的Promise对象的状态和值
                  resolve(result);
                }
              } catch (e) {
                // 若then()方法的回调函数抛出异常，则直接通过reject()方法设置新的Promise对象的状态和值
                reject(e);
              }
            }
          });
        }
        catch(onReject) {
          // catch()方法是对then()方法进行封装
          return this.then(undefined, onReject);
        }
        static resolve(params) {
          if (params instanceof Promise) {
            return params;
          } else {
            return new Promise((resolve, reject) => {
              resolve(params);
            });
          }
        }
        static reject(params) {
          return new Promise((resolve, reject) => {
            reject(params);
          });
        }
        static all(params) {
          return new Promise((resolve, reject) => {
            let list = [];
            for (let i in params) {
              params[i].then(
                value => {
                  list[i] = value;
                },
                error => {
                  reject(error);
                }
              );
            }
            if (list.length == params.length) {
              resolve(list);
            }
          });
        }
        static race(params) {
          return new Promise((resolve, reject) => {
            for (let i in params) {
              params[i].then(
                value => {
                  resolve(value);
                },
                error => {
                  reject(error);
                }
              );
            }
          });
        }
      }
    </script>
  </body>
</html>