如何封装Promise对象?
最近看到了一个有趣的Promise的方法,这里记录下来
- <script>
- class MyPromise {
- constructor(executor) {
- // 初始化state赋值为pending
- this.state = "pending";
- // 定义成功的 值
- this.value = undefined;
- //定义失败的 原因
- this.reason = undefined;
- //定义成功存起来的数组
- this.onResolvedCallbacks = [];
- //定义失败存起来的数组
- this.onRejectedCallbacks = [];
- let resolve = (value) => {
- // state改变,resolve调用就会失败
- if (this.state === "pending") {
- this.value = value;
- //resolve调用后,state转为fulfilled
- this.state = "fulfilled";
- // 一旦resolve执行,调用成功数组的函数
- this.onResolvedCallbacks.forEach(function (fn) {
- return fn(value);
- });
- //也可以使用es6语法 简写
- //this.onResolvedCallbacks.forEach(fn => fn(value));
- }
- };
- let reject = (reason) => {
- // state改变,reject调用就会失败
- if (this.state === "pending") {
- this.reason = reason;
- // reject调用后,state转为失败状态
- this.state = "rejected";
- // 一旦reject执行,调用失败数组的函数
- this.onRejectedCallbacks.forEach(fn => fn(reason)); //简写
- }
- };
- // new MyPromise后的实例具有状态, 默认状态是等待,当执行器调用resolve后, 实例状态为成功状态;当执行器调用reject后,实例状态为失败状态
- try {
- executor(resolve, reject);
- } catch (error) {
- reject(error);
- }
- }
- // then中有两个参数 ,把第一个参数叫做then的成功回调,把第二个参数叫做then的失败回调,这两个参数也都是函数,当执行器调用resolve后,then中第一个参数函数会执行,当执行器调用reject后,then中第二个参数函数会执行
- then(onFulfilled, onRejected) {
- // 状态为fulfilled,执行onFulfilled,传入成功的值
- if (this.state === "fulfilled") {
- onFulfilled(this.value);
- }
- // 状态为rejected,执行onRejected,传入失败的原因
- if (this.state === "rejected") {
- onRejected(this.reason);
- }
- // 状态为pending时
- if (this.state === "pending") {
- // onFulfilled传入到成功数组
- this.onResolvedCallbacks.push(onFulfilled);
- // onRejected传入到失败数组
- this.onRejectedCallbacks.push(onRejected);
- }
- }
- }
- //当new MyPromise实例 会立即调用constructor(executor)
- let p = new MyPromise((resolve, reject) => {
- console.log("开始");
- setTimeout(function () {
- resolve("我成功了");
- }, 2000);
- });
- p.then(
- (resolve) => {
- console.log("success:" + resolve);
- },
- (reject) => {
- console.log("error:" + reject);
- }
- );
- console.log("结束");
- </script>
如何封装Promise对象?的更多相关文章
- 回调函数 和 promise对象,及封装API接口
1.回调函数:https://blog.csdn.net/baidu_32262373/article/details/54969696 注意:回调函数不一定需要用到 return.如果浏览器支持Pr ...
- 使用promise对象封装一个ajaxGet函数
function promiseAjax(url,data){ var pro = new Promise(function(success,failed){ 承诺一 ...
- 用Promise对象封装JQuery的AJAX过程
let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...
- ES6深入学习记录(二)promise对象相关
1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...
- JavaScript异步编程(1)- ECMAScript 6的Promise对象
JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...
- ES6的promise对象研究
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- JavaScript 初识Promise 对象
什么是Promise? 其实, Promise就是一个类,而且这个类已经成为ES6的标准,是 ECMAScript 6 规范的重要特性之一.这个类目前在chrome32.Opera19.Firefox ...
- 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象
JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...
- 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...
随机推荐
- Spring Data JPA 的 Specifications动态查询
主要的结构: 有时我们在查询某个实体的时候,给定的条件是不固定的,这时就需要动态构建相应的查询语句,在Spring Data JPA中可以通过JpaSpecificationExecutor接口查询. ...
- 初级程序需要掌握的SQL(一)
之前我也是,是一个看视频学习的小白,以前老是喜欢通宵看视频,一天10小时小时的学习量,一点效率都没有,就想写一个博客,来帮助大家回顾的SQL语句, 因为我也是初级,所以名字就叫初级程序员需要掌握的sq ...
- C4 模型 - 可视化架构设计
前言 世界上最难的两件事是: 1. 把我的思想放进你的脑袋 2. 把你的钱放进我的口袋 第二点我们不探讨,因为这是众所周知的,不信?过来试试:) 对于第一点,对我们程序员来说,其实也是我个人一直强调的 ...
- webform中jQuery获取checkboxlist的value值
后台绑定 /首先,在绑定checkboxlist时,为ListItem每个对象添加一个alt属性,值保存对应的value值,代码如下 if(dt != null && dt.Rows. ...
- String 和 StringBuffer,StringBuilder 的区别
String 和 StringBuffer,StringBuilder 的区别 String 是 " 字符串常量" , 对象一旦创建就不可改变,这就导致如果字符串常量池中没有所需对 ...
- Flash Player的终章——赠予它的挽歌
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 12月28日消息,微软已经确认Windows 10在下一次更新时将自动删除F ...
- C语言I博客作业1
1 .班级链接: https://edu.cnblogs.com/campus/zswxy/SE2020-3 2 .作业要求链接: https://edu.cnblogs.com/campus/zsw ...
- 基于ROBO-MAS多智能体自主协同 高频投影定位系统
- 免费的java代码混淆,程序加密
java代码可以反编译,特别是放在客户端的程序很用被剽窃,盗用.保护程序一般都有以下几个方法: 1.将class文件加密,这个是最安全的,但也费事儿,因为要重写classloader来解密class文 ...
- 五、Zookeeper、Hbase集群搭建
一.前提 1.安装JDK 2.安装Hadoop 3.安装zoookeeper 1.加入zookeeper包,并解压tar -zxvf zookeeper-3.4.9.tar.gz 2.去/etc/pr ...