最近看到了一个有趣的Promise的方法,这里记录下来

  1. <script>
  2. class MyPromise {
  3. constructor(executor) {
  4. // 初始化state赋值为pending
  5. this.state = "pending";
  6. // 定义成功的 值
  7. this.value = undefined;
  8. //定义失败的 原因
  9. this.reason = undefined;
  10. //定义成功存起来的数组
  11. this.onResolvedCallbacks = [];
  12. //定义失败存起来的数组
  13. this.onRejectedCallbacks = [];
  14. let resolve = (value) => {
  15. // state改变,resolve调用就会失败
  16. if (this.state === "pending") {
  17. this.value = value;
  18. //resolve调用后,state转为fulfilled
  19. this.state = "fulfilled";
  20. // 一旦resolve执行,调用成功数组的函数
  21. this.onResolvedCallbacks.forEach(function (fn) {
  22. return fn(value);
  23. });
  24. //也可以使用es6语法 简写
  25. //this.onResolvedCallbacks.forEach(fn => fn(value));
  26. }
  27. };
  28. let reject = (reason) => {
  29. // state改变,reject调用就会失败
  30. if (this.state === "pending") {
  31. this.reason = reason;
  32. // reject调用后,state转为失败状态
  33. this.state = "rejected";
  34. // 一旦reject执行,调用失败数组的函数
  35. this.onRejectedCallbacks.forEach(fn => fn(reason)); //简写
  36. }
  37. };
  38.  
  39. // new MyPromise后的实例具有状态, 默认状态是等待,当执行器调用resolve后, 实例状态为成功状态;当执行器调用reject后,实例状态为失败状态
  40. try {
  41. executor(resolve, reject);
  42. } catch (error) {
  43. reject(error);
  44. }
  45. }
  46.  
  47. // then中有两个参数 ,把第一个参数叫做then的成功回调,把第二个参数叫做then的失败回调,这两个参数也都是函数,当执行器调用resolve后,then中第一个参数函数会执行,当执行器调用reject后,then中第二个参数函数会执行
  48. then(onFulfilled, onRejected) {
  49. // 状态为fulfilled,执行onFulfilled,传入成功的值
  50. if (this.state === "fulfilled") {
  51. onFulfilled(this.value);
  52. }
  53. // 状态为rejected,执行onRejected,传入失败的原因
  54. if (this.state === "rejected") {
  55. onRejected(this.reason);
  56. }
  57. // 状态为pending时
  58. if (this.state === "pending") {
  59. // onFulfilled传入到成功数组
  60. this.onResolvedCallbacks.push(onFulfilled);
  61. // onRejected传入到失败数组
  62. this.onRejectedCallbacks.push(onRejected);
  63. }
  64. }
  65. }
  66. //当new MyPromise实例 会立即调用constructor(executor)
  67. let p = new MyPromise((resolve, reject) => {
  68. console.log("开始");
  69. setTimeout(function () {
  70. resolve("我成功了");
  71. }, 2000);
  72. });
  73.  
  74. p.then(
  75. (resolve) => {
  76. console.log("success:" + resolve);
  77. },
  78. (reject) => {
  79. console.log("error:" + reject);
  80. }
  81. );
  82. console.log("结束");
  83. </script>

转载于:https://blog.csdn.net/l_XIANA/article/details/110141804?utm_medium=distribute.pc_category.none-task-blog-hot-9.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-9.nonecase

如何封装Promise对象?的更多相关文章

  1. 回调函数 和 promise对象,及封装API接口

    1.回调函数:https://blog.csdn.net/baidu_32262373/article/details/54969696 注意:回调函数不一定需要用到 return.如果浏览器支持Pr ...

  2. 使用promise对象封装一个ajaxGet函数

    function promiseAjax(url,data){        var pro = new Promise(function(success,failed){           承诺一 ...

  3. 用Promise对象封装JQuery的AJAX过程

    let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...

  4. ES6深入学习记录(二)promise对象相关

    1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...

  5. JavaScript异步编程(1)- ECMAScript 6的Promise对象

    JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...

  6. ES6的promise对象研究

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  7. JavaScript 初识Promise 对象

    什么是Promise? 其实, Promise就是一个类,而且这个类已经成为ES6的标准,是 ECMAScript 6 规范的重要特性之一.这个类目前在chrome32.Opera19.Firefox ...

  8. 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象

    JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...

  9. 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)

    本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...

随机推荐

  1. Spring Data JPA 的 Specifications动态查询

    主要的结构: 有时我们在查询某个实体的时候,给定的条件是不固定的,这时就需要动态构建相应的查询语句,在Spring Data JPA中可以通过JpaSpecificationExecutor接口查询. ...

  2. 初级程序需要掌握的SQL(一)

    之前我也是,是一个看视频学习的小白,以前老是喜欢通宵看视频,一天10小时小时的学习量,一点效率都没有,就想写一个博客,来帮助大家回顾的SQL语句, 因为我也是初级,所以名字就叫初级程序员需要掌握的sq ...

  3. C4 模型 - 可视化架构设计

    前言 世界上最难的两件事是: 1. 把我的思想放进你的脑袋 2. 把你的钱放进我的口袋 第二点我们不探讨,因为这是众所周知的,不信?过来试试:) 对于第一点,对我们程序员来说,其实也是我个人一直强调的 ...

  4. webform中jQuery获取checkboxlist的value值

    后台绑定 /首先,在绑定checkboxlist时,为ListItem每个对象添加一个alt属性,值保存对应的value值,代码如下 if(dt != null && dt.Rows. ...

  5. String 和 StringBuffer,StringBuilder 的区别

    String 和 StringBuffer,StringBuilder 的区别 String 是 " 字符串常量" , 对象一旦创建就不可改变,这就导致如果字符串常量池中没有所需对 ...

  6. Flash Player的终章——赠予它的挽歌

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 12月28日消息,微软已经确认Windows 10在下一次更新时将自动删除F ...

  7. C语言I博客作业1

    1 .班级链接: https://edu.cnblogs.com/campus/zswxy/SE2020-3 2 .作业要求链接: https://edu.cnblogs.com/campus/zsw ...

  8. 基于ROBO-MAS多智能体自主协同 高频投影定位系统

  9. 免费的java代码混淆,程序加密

    java代码可以反编译,特别是放在客户端的程序很用被剽窃,盗用.保护程序一般都有以下几个方法: 1.将class文件加密,这个是最安全的,但也费事儿,因为要重写classloader来解密class文 ...

  10. 五、Zookeeper、Hbase集群搭建

    一.前提 1.安装JDK 2.安装Hadoop 3.安装zoookeeper 1.加入zookeeper包,并解压tar -zxvf zookeeper-3.4.9.tar.gz 2.去/etc/pr ...