30.自定义封装Promise-class版本的实现

最新推荐文章于 2024-11-16 22:34:09 发布
最新推荐文章于 2024-11-16 22:34:09 发布
阅读量229 收藏
点赞数 1
分类专栏： Promise 文章标签： java 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yujiabao702/article/details/137524060
版权

1.先创建 class 结构

  class Promise {}

2.声明构造方法,把原本的 Promise 函数代码放进去

  class Promise {
    // 构造方法
    constructor(executor) {
      const self = this;

      this.PromiseState = "pending";
      this.PromiseResult = null;
      this.callbacks = [];

      function resolve(data) {
        if (self.PromiseState !== "pending") return;
        self.PromiseState = "resolved";
        self.PromiseResult = data;
        setTimeout(() => {
          self.callbacks.forEach((item) => {
            item.onResolved(self.PromiseResult);
          });
        });
      }
      function reject(data) {
        if (self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = data;
        setTimeout(() => {
          self.callbacks.forEach((item) => {
            item.onRejected(self.PromiseResult);
          });
        });
      }

      try {
        executor(resolve, reject);
      } catch (e) {
        reject(e);
      }
    }
  }

3.声明then方法，把原本的then方法的代码放进去

  class Promise {
    // 构造方法
    constructor(executor) {
      const self = this;

      this.PromiseState = "pending";
      this.PromiseResult = null;
      this.callbacks = [];

      function resolve(data) {
        if (self.PromiseState !== "pending") return;
        self.PromiseState = "resolved";
        self.PromiseResult = data;
        setTimeout(() => {
          self.callbacks.forEach((item) => {
            item.onResolved(self.PromiseResult);
          });
        });
      }
      function reject(data) {
        if (self.PromiseState !== "pending") return;
        self.PromiseState = "rejected";
        self.PromiseResult = data;
        setTimeout(() => {
          self.callbacks.forEach((item) => {
            item.onRejected(self.PromiseResult);
          });
        });
      }

      try {
        executor(resolve, reject);
      } catch (e) {
        reject(e);
      }
    }

    // then方法
    then(onResolved, onRejected) {
      const self = this;
      if (typeof onRejected !== "function") {
        onRejected = (reason) => {
          throw reason;
        };
      }
      if (typeof onResolved !== "function") {
        onResolved = (value) => value;
      }
      return new Promise((resolve, reject) => {
        function callback(type) {
          try {
            let result = type(self.PromiseResult);
            if (result instanceof Promise) {
              result.then(
                (v) => {
                  resolve(v);
                },
                (r) => {
                  reject(r);
                }
              );
            } else {
              resolve(result);
            }
          } catch (e) {
            reject(e);
          }
        }
        if (this.PromiseState === "resolved") {
          setTimeout(() => {
            callback(onResolved);
          });
        }
        if (this.PromiseState === "rejected") {
          setTimeout(() => {
            callback(onRejected);
          });
        }
        if (this.PromiseState === "pending") {
          this.callbacks.push({
            onResolved: function () {
              callback(onResolved);
            },
            onRejected: function () {
              callback(onRejected);
            },
          });
        }
      });
    }
  }

4.catch方法也是一样

class Promise {
  // 构造方法
  constructor(executor) {
    const self = this

    this.PromiseState = 'pending'
    this.PromiseResult = null
    this.callbacks = [];

    function resolve(data) {
      if (self.PromiseState !== 'pending') return
      self.PromiseState = 'resolved'
      self.PromiseResult = data
      setTimeout(() => {
        self.callbacks.forEach((item) => {
          item.onResolved(self.PromiseResult);
        });
      })
    }
    function reject(data) {
      if (self.PromiseState !== 'pending') return
      self.PromiseState = 'rejected'
      self.PromiseResult = data
      setTimeout(() => {
        self.callbacks.forEach((item) => {
          item.onRejected(self.PromiseResult);

        });
      })
    }

    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e)
    }
  }

  // then方法
  then(onResolved, onRejected) {
    const self = this;
    if (typeof onRejected !== 'function') {
      onRejected = reason => {
        throw reason
      }
    }
    if (typeof onResolved !== 'function') {
      onResolved = value => value
    }
    return new Promise((resolve, reject) => {
      function callback(type) {
        try {
          let result = type(self.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "resolved") {
        setTimeout(() => {
          callback(onResolved);
        })
      }
      if (this.PromiseState === "rejected") {
        setTimeout(() => {
          callback(onRejected);
        })
      }
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved: function () {
            callback(onResolved);
          },
          onRejected: function () {
            callback(onRejected);
          },
        });
      }
    });
  }

  // catch方法
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }
}

5.resolve 方法不太一样,它是 Promise 的方法,所以前面加上 static 进行描述,表明是一个静态成员,reject、all、race 也是如此

class Promise {
  // 构造方法
  constructor(executor) {
    const self = this

    this.PromiseState = 'pending'
    this.PromiseResult = null
    this.callbacks = [];

    function resolve(data) {
      if (self.PromiseState !== 'pending') return
      self.PromiseState = 'resolved'
      self.PromiseResult = data
      setTimeout(() => {
        self.callbacks.forEach((item) => {
          item.onResolved(self.PromiseResult);
        });
      })
    }
    function reject(data) {
      if (self.PromiseState !== 'pending') return
      self.PromiseState = 'rejected'
      self.PromiseResult = data
      setTimeout(() => {
        self.callbacks.forEach((item) => {
          item.onRejected(self.PromiseResult);

        });
      })
    }

    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e)
    }
  }

  // then方法
  then(onResolved, onRejected) {
    const self = this;
    if (typeof onRejected !== 'function') {
      onRejected = reason => {
        throw reason
      }
    }
    if (typeof onResolved !== 'function') {
      onResolved = value => value
    }
    return new Promise((resolve, reject) => {
      function callback(type) {
        try {
          let result = type(self.PromiseResult);
          if (result instanceof Promise) {
            result.then(
              (v) => {
                resolve(v);
              },
              (r) => {
                reject(r);
              }
            );
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      }
      if (this.PromiseState === "resolved") {
        setTimeout(() => {
          callback(onResolved);
        })
      }
      if (this.PromiseState === "rejected") {
        setTimeout(() => {
          callback(onRejected);
        })
      }
      if (this.PromiseState === "pending") {
        this.callbacks.push({
          onResolved: function () {
            callback(onResolved);
          },
          onRejected: function () {
            callback(onRejected);
          },
        });
      }
    });
  }

  // catch方法
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }

  // resolve方法
  static resolve(value) {
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(v => {
          resolve(v)
        }, r => {
          reject(r)
        })
      } else {
        resolve(value)
      }
    })
  }

  // reject方法
  static resolve(reason) {
    return new Promise((resolve, reject) => {
      reject(reason)
    })
  }

  // all方法
  static all(promises) {
    return new Promise((resolve, reject) => {
      let count = 0
      let arr = []
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(v => {
          count++
          arr[i] = v
          if (count === promises.length) {
            resolve(arr)
          }
        }, r => {
          reject(r)
        })
      }
    })
  }

  // race方法
  static race(promises) {
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(v => {
          resolve(v)
        }, r => {
          reject(r)
        })
      }
    })
  }
}

月亮慢慢圆o
关注
专栏目录
【Promise】自定义 - 手写Promise - Promise.all - Promise(executor)
YK菌的博客
03-07 4256
文章目录3. 自定义(手写)Promise 3. 自定义(手写)Promise
Vue装饰器写法-vue-class-component
Youthful_Dreams的博客
06-02 2221
Vue装饰器写法 依赖库介绍 vue-property-derocator (官方文档) 在Vue中使用TypeScript时，非常好用的一个库，使用装饰器来简化书写，下列是它提供的一下装饰器。 1.安装 npm i -S vue-property-decorator @Prop @PropSync @Emit @Model @Watch @Provide @Inject @Component(来自vue-class-component库的vue-class-component) Mixins方法(来自v
用 class 写法完整实现一个 Promise
weixin_34326558的博客
05-16 550
1.前言 本文分析 Promise 特性的了解，完整实现了 Promise 所有功能。没有参考原生 Promise 的写法，自己根据思路一步一步完成以及描述，每个构建模块由：1、Promise 特性描述；2、实现特性的完整思路(分析一波) 3、项目代码；4、功能测试代码 几个部分组成。大致用到的知识有： 1、变量私有化；2、订阅发布模式；...
使用 class 实现 Promise
qq_39211165的博客
01-19 738
说明 使用 class动手实现了一遍 Promise 模仿： https://github.com/ydiguo/Promise （内含大量注释????） 使用 promises-aplus-tests 检验通过 仓库： MyPromise 代码 const PENDING_STATE = "pending"; const FULFILLED_STATE = "fulfilled"; const REJECTED_STATE = "rejected"; const isFunction = functi
【elementUI】自定义封装el-upload上传内容
前端代码小白的日常博客
02-15 2458
before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。file-list 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}] array。为实现如图所示功能，点击第一步弹出模态框，第二部将所有文件导入，第三步点击确定的时候上传到后台接口，封装一个组件。http-request:覆盖默认的上传行为，可以自定义上传的实现。
Promise自定义封装-async-await
jxmchou的博客
10-27 719
@top(Promise自定义封装-async-await)
Promise自定义封装
weixin_51735748的博客
12-04 1053
这篇文章主要是介绍如果自己封装Promise构造函数以及其相应的方法。欢迎交流学习！
自定义封装Promise
林木木的博客
07-11 553
盘点JavaScript高级手写知识，第四弹！
Promise(三) promise自定义封装25-35
Bella.的博客
12-21 480
111
vue2_二次封装a-upload组件，自定义上传预览
热门推荐
编程知识分享，主打前端
12-25 3万+
自定义上传组件
promise.js自定义封装，包含构造函数以及class封装
01-10
想了解promise封装的人
promise-class:简单的承诺包装
05-01
Promise-class是基于Promise的一个简单封装，它将Promise对象包装成一个类，使得我们可以更好地管理和组织异步代码。下面我们将深入探讨Promise的基本概念、Promise-class的工作原理以及如何在实际项目中应用。 ...
Servlet的生命周期
wyk的博客
11-13 1337
Servlet 的生命周期包含四个主要阶段：加载与实例化、初始化、请求处理、销毁。开发者可以在这些生命周期方法中编写初始化、请求处理和资源清理的代码，确保 Web 应用程序的正常运行。
Mybatis
庸不易的博客
11-15 655
1、定义不同：#{} 预处理：而 ${} 是直接替换2、使用不同：#{} 适用于所有类型的参数匹配；但 ${} 只适用于数值类型。3、安全性不同：#{} 性能高，并且没有安全问题；但 $ {} 存在 SQL 注入的安全问题。4、使用场景不同：当传递的是一个 SQL 关键字 的时候，只能 使用 ${}。当传递的是一个字段，总之，就是需要获取到参数类型 与 内容，只能使用 #{}。（PS：数字类型，#{} 和 ${} 都是可以使用的！5、 ${} 不能用于 模糊匹配查询；
1112--接口
kequanrrr的博客
11-12 449
interface + 接口名{ }。。。。implements 接口名{ }接口：接口中的抽象方法可以省略 abstract 关键字使用：要实现接口中的所有 抽象方法隐含三个修饰符：public+static+final2.单继承 多接口。
SpringBoot(五)
₍˄·͈༝·͈˄*₎◞ ̑̑的博客
11-13 920
Rest请求处理
什么是面向对象编程？什么是面向过程编程？
m0_70208894的博客
11-15 503
不同的编程范式适用于不同的场景，选择合适的范式可以提高代码的可维护性、可读性和效率。Java 和 Go 的选择反映了不同的设计哲学，Java 更加注重封装和对象的使用，而 Go 更加简洁，强调过程和函数的使用。
java加锁问题详解
qq_74056922的博客
11-14 755
java(JVAM)对加锁的API进行了封装,通过使用synchronized关键字来完成加锁操作。
【JavaSE线程知识总结】
最新发布
qq_63713328的博客
11-16 753
本章主要讲解了线程几种线程的创建方式,线程安全问题出现的场景,以及线程安全的解决方式
深入理解JavaScript自定义Promise实现原理
自定义Promise是指编写自己的Promise实现，而不是使用JavaScript原生提供的Promise对象。在自定义Promise的过程中，我们需要自己来实现一个构造函数，以及then和catch等方法。 以下是一个自定义Promise的示例代码：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值