在promise  的then  中我们不仅有 成功状态 失败状态,可能还有等待状态,所以我们要对等待状态进行处理

function  Promise(executor) {
let self = this;
self.value = null;
self.reason = null;
self.resolveCallback = [];
self.rejectCallback = [];
//设置默认状态
self.status = 'pending'
//成功函数
function resolve(value) {
if(self.status=='pending') {
self.status = 'success';
// console.log(self.value);
self.value = '运行成功了';
self.resolveCallback.forEach(fn=>fn()); // 发布
}
};
//失败函数
function reject(reason) {
if(self.status == 'pending') {
self.status = 'fail';
self.reason = '运行失败了';
self.rejectCallback.forEach(fn=>fn()); // 发布
}
}
//默认立即执行函数 传递两个参数
executor(resolve,reject);
}
Promise.prototype.then = function(OnResolve,OnReject) {
// console.log(this.value)
if(this.status == 'success') {
OnResolve(this.value);
}
if(this.status =='fail') {
OnReject(this.reason);
}
//第3种状态 处于等待状态
if(this.status == 'pending') {
//将成功的回调push 到 resolveCallback 这个数组中
this.resolveCallback.push(()=>{
OnResolve(this.value);
})
//将失败的回调 push 到 rejectCallback 这个数组中
this.rejectCallback.push(()=>{
OnReject(this.reason);
})
}
};
module.exports= Promise;
//一进来 我们开始执行 executor函数 传递两个参数 再调用 then 方法 ,then 方法里面有 OnResolve方法,OnReject 方法
// then 方法中,我们一开始的状态是pending 然后根据 状态的不同 调用不同的函数,
// 在两个不同的函数中 我们 进行判断 因为状态一开始都是有 pending = > success 或者 pending =>fail
// 判断 时修改 状态 和 显示值

在 then  方法中 我们先进行状态的判断 ,如果这个状态是 pending  状态 ,我们就对它进行处理

首先先声明 成功状态的回调数组 为空 失败状态的回调数组为空

  self.resolveCallback = [];
self.rejectCallback = [];

在等待状态中 我们将  成功的函数 push 到 成功状态的回调数组 中,将失败函数push  到失败状态的回调 数组中

 //将成功的回调push 到 resolveCallback 这个数组中
this.resolveCallback.push(()=>{
OnResolve(this.value);
})
//将失败的回调 push 到 rejectCallback 这个数组中
this.rejectCallback.push(()=>{
OnReject(this.reason);
})

同时我们将 状态的值传递进去

最后 在各自的执行函数进行数组的遍历 调用自身的函数

  self.resolveCallback.forEach(fn=>fn()); // 发布

理解Promise (3)的更多相关文章

  1. 大白话讲解Promise(二)理解Promise规范

    上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...

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

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

  3. 理解Promise的三种姿势

    译者按: 对于Promise,也许你会用了,却并不理解:也许你理解了,却只可意会不可言传.这篇博客将从3个简单的视角理解Promise,应该对你有所帮助. 原文: Three ways of unde ...

  4. 理解Promise的3种姿势

    译者按: 对于Promise,也许你会用了,却并不理解:也许你理解了,却只可意会不可言传.这篇博客将从3个简单的视角理解Promise,应该对你有所帮助. 原文: Three ways of unde ...

  5. 分步理解 Promise 的实现

    一个 Promise 的运用: var firstPromise = new Promise(function(resolve,reject){ setTimeout(function(){ var ...

  6. 理解promise 02

    1:promise是什么? 就是(链式)包装的回调函数. 2:语法 new Promise( function(resolve, reject) {...} /* executor */ ); exe ...

  7. 160701、理解 Promise 的工作原理

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...

  8. 160623、理解 Promise 的工作原理

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...

  9. 理解Promise简单实现的背后原理

    在写javascript时我们往往离不开异步操作,过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的.事件监听的 ...

  10. 理解promise 01

    原文地址: http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html 用Javascript的小伙伴们,是时候承认了,关于 ...

随机推荐

  1. mysql中的collate关键字是什么意思?

    CREATE TABLE `tb_order` ( `order_id` varchar(50) COLLATE utf8_bin DEFAULT NULL COMMENT '订单id', `paym ...

  2. fedora23帮定键盘系统操作快捷键

    在All settings -> keyboard 主要是以super为主, 然后有 super+ shift+...虽然感觉用 ctrl+super+... 来组合更方便, 但是用 shift ...

  3. leetcode 142. 环形链表 II(c++)

    给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 - ...

  4. Spring Cloud Stream 使用延迟消息实现定时任务(RabbitMQ)

    应用场景 通常在应用开发中我们会碰到定时任务的需求,比如未付款订单,超过一定时间后,系统自动取消订单并释放占有物品. 许多同学的第一反应就是通过spring的schedule定时任务轮询数据库来实现, ...

  5. 使用spring提供的@Scheduled注解创建定时任务

    使用方法 操作非常简单,只要按如下几个步骤配置即可 1. 导入jar包或添加依赖,其实定时任务只需要spring-context即可,当然起服务还需要spring-web: 2. 编写定时任务类和方法 ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第3节 接口_1_接口概述与生活举例

  7. Jmeter源码框架

    首先jmeter框架入口类: NewDriver类(src/core/org/apache/jmeter/NewDriver.java) public static void main(String[ ...

  8. OpenResty json 删除转义符

    OpenResty 中删除 json 中的转义符 cjson 在 encode 时  “/” 会自动添加转义符 “\”: 在 decode 时也会自动将转义符去掉.工作中有个特殊需求,需要手工删除转义 ...

  9. 前端 CSS的继承性

    css有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 记住:有一些属性是可以继承下来 : color . font-*. text- ...

  10. 《剑指offer》面试题18 树的子结构 Java版

    (输入两棵二叉树A和B,判断B是不是A的子结构.补充下,根据书中的代码来看,子结构的定义并不包括叶子节点下的null,也就是说只要B的存在数字的结构存在于A中就行,那么如果B是null树,那么就不属于 ...