只考虑成功时的调用,方便理解一下promise的原理
promise的例子:

1、

接下来一步步实现一个简单的promise

step1:
promise 接受一个函数作为构造函数的参数,是立即执行的,并且返回个resolve函数作为该函数的回调

function CPromise(fun){
  function resolve(){
  }
fun(resolve);
}

step2:

promise的then方法接受一个函数作为参数,并且该函数的参数值,来自于resolve方法中传入的参数,说明resolve运行时,实际上运行了then函数中作为参数的函数(注册该函数)

调用then方法(相当于先注册返回成功后需要执行的函数,参考观察者模式),实际上就是在promise异步返回后,将所有需要处理的回调函数放入callbacks中,当resolve触发时,逐个执行callbacks中的回调。

function CPromise(fun){
this.callback = null;
  function resolve(data){
this.callback(data);
  }
this.then = function(callback){
this.callback = callback;
}
fun(resolve);
}

此时运行

step3:

说明在resolve方法被运行时,then中的函数还没有被注册(因为代码是同步的,所以直接就运行了resolve),所以加一个延迟,保证调用时一定被注册了,call用来绑定Cpromise 中的this作用域,原生promise并不需要

function CPromise(fun){
this.callback = null;
  function resolve(data){
    setTimeout(()=>{
      this.callback(data);     });
  }
this.then = function(callback){
this.callback = callback;
}
fun.call(this,resolve);//绑定this作用域,this.callback时使用
}

step4:

满足多次调用then,可以设置一个数组存储then中注册的函数

function CPromise(fun){
this.callbacks = [];
  function resolve(data){
    setTimeout(()=>{
      this.callbacks.forEach(function(fun){
  fun(data);
  });
   });
  }
this.then = function(callback){
this.callbacks.push(callback);
}
fun.call(this,resolve);
}

step5:
加入状态机制,当promise的状态还在Pending时,then中注册的事件就push到队列中,如果已经Fulfilled,那么之后注册的事件立即执行

promise的例子:

theh中的事件是在resolve运行后才注册的,说明当状态已经是Fulfilled后,所有注册的事件都是立即执行的

function CPromise(fun){
this.callbacks = [],
state='pending',
value = null;
  function resolve(data){
this.value = data;
    setTimeout(()=>{
this.state = 'fulfilled';
      this.callbacks.forEach(function(fun){
   fun(data);
   });
   });
  }
this.then = function(callback){
if(this.state == 'pending'){
this.callbacks.push(callback);
}
callback(this.value);
}
fun.call(this,resolve);
} function a(){
var c = b();
setTimeout(function(){
console.info();
c.then(function(data){
console.info(data);
})
c.then(function(data){
console.info('a'+data);
})
},);
}
function b(){
return new CPromise(function(resolve) {
console.info();
resolve.call(this,);
})
}
a();

实现简单的promise的更多相关文章

  1. 一个简单的Promise 实现

    用了这么长时间的promise,也看了很多关于promise 的文章博客,对promise 算是些了解.但是要更深的理解promise,最好的办法还是自己实现一个. 我大概清楚promise 是对异步 ...

  2. 如何用原生JS实现一个简单的promise

    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...

  3. 简单版 Promise/A+,通过官方872个测试用例

    promise 标准 在实现 Promise 之前要清楚的是 JavaScript 中的 Promise 遵循了 Promises/A+ 规范,所以我们在编写 Promise 时也应当遵循这个规范,建 ...

  4. 聊一聊看似简单的Promise.prototype.then()方法

    Promise.prototype.then() Proise实例的then方法是定义在原型对象Promise.prototype上的,它的作用是为Promise实例添加状态改变时的回调函数. 该方法 ...

  5. 简单模拟 Promise

    class promise { constructor(fn) { this.data = null; this.err = null; this.isPromise = false; this.er ...

  6. [手写系列] 带你实现一个简单的Promise

    简介 学习之前 需要先对Promise有个基本了解哦,这里都默认大家都是比较熟悉Promise的 本次将带小伙伴们实现Promise的基本功能 Promise的基本骨架 Promise的then Pr ...

  7. 简单的 Promise 实现

    参考 http://www.tuicool.com/articles/RzQRV3 var PENDING = undefined, FULLFILLED = 1, REJECTED = 2; var ...

  8. 简单的 Promise 实现 一

    const Promise = function(fn){ let state = { pending: "pending", fulfilled: "fulfilled ...

  9. 手写简单的promise

    function Promise(fn) { var that = this; this.status = "pedding"; this.value = undefined; / ...

随机推荐

  1. 安装hue及hadoop和hive整合

    环境: centos7 jdk1.8.0_111 Hadoop 2.7.3 Hive1.2.2 hue-3.10.0 Hue安装: 1.下载hue-3.10.0.tgz: https://dl.dro ...

  2. [Kubernetes]基于角色的权限控制之RBAC

    Kubernetes中有很多种内置的编排对象,此外还可以自定义API资源类型和控制器的编写方式.那么,我能不能自己写一个编排对象呢?答案是肯定的.而这,也正是Kubernetes项目最具吸引力的地方. ...

  3. web文件下载

    web页面实现文件下载的几种方法 今天碰到文件下载的一些问题,本着知其然也要知其所以然的精神,站在巨人的肩膀上深入学习和测试了一下,抛砖引玉,现在总结结论如下: 1)标准URL下载方式可以通过在web ...

  4. 高可用Redis(八):Redis主从复制

    1.Redis复制的原理和优化 1.1 Redis单机的问题 1.1.1 机器故障 在一台服务器上部署一个Redis节点,如果机器发生主板损坏,硬盘损坏等问题,不能在短时间修复完成,就不能处理Redi ...

  5. 数据库根据id排序

    select * from 表名 order by id 根据 id 从小到大排序

  6. char和unsigned char--数据类型区别

    char和unsigned char --数据类型区别 除去布尔型和扩展的字符型之外,其它整型可以划分为带符号的(signed)和无符号的(unsigned)两种. 类型int.short.long和 ...

  7. 1024 Python 要诀

    在medium看到一篇好文,给初学者的Python小技巧,非常实用,可以用在你的程序中,代码瞬间变得高大上,看起来还有Pythonic 的感觉,Talk is cheap show me the co ...

  8. JAVA取数两个数组交集,考虑重复和不重复元素

    1.考虑不重复元素,重复元素不添加 import java.awt.List; import java.util.ArrayList; import java.util.TreeSet; public ...

  9. CentOS openssh升级到openssh可用

    1. https://blog.csdn.net/moonpure/article/details/54575401 2. http://www.it165.net/admin/html/201303 ...

  10. C# 获取版本号

    Text = Text + " [V." + Assembly.GetExecutingAssembly().GetName().Version + "]";