理解Promise (3)
在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)的更多相关文章
- 大白话讲解Promise(二)理解Promise规范
上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...
- 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...
- 理解Promise的三种姿势
译者按: 对于Promise,也许你会用了,却并不理解:也许你理解了,却只可意会不可言传.这篇博客将从3个简单的视角理解Promise,应该对你有所帮助. 原文: Three ways of unde ...
- 理解Promise的3种姿势
译者按: 对于Promise,也许你会用了,却并不理解:也许你理解了,却只可意会不可言传.这篇博客将从3个简单的视角理解Promise,应该对你有所帮助. 原文: Three ways of unde ...
- 分步理解 Promise 的实现
一个 Promise 的运用: var firstPromise = new Promise(function(resolve,reject){ setTimeout(function(){ var ...
- 理解promise 02
1:promise是什么? 就是(链式)包装的回调函数. 2:语法 new Promise( function(resolve, reject) {...} /* executor */ ); exe ...
- 160701、理解 Promise 的工作原理
Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...
- 160623、理解 Promise 的工作原理
Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...
- 理解Promise简单实现的背后原理
在写javascript时我们往往离不开异步操作,过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的.事件监听的 ...
- 理解promise 01
原文地址: http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html 用Javascript的小伙伴们,是时候承认了,关于 ...
随机推荐
- UVALive 6862 Triples (找规律 暴力)
Triples 题目链接: http://acm.hust.edu.cn/vjudge/contest/130303#problem/H Description http://7xjob4.com1. ...
- [CSP-S模拟测试]:木叶下(图论)
题目传送门(内部题77) 输入格式 第一行一个整数$n$,表示原先的树的点数接下来$n-1$行每行两个整数$a,b$,表示原先的树上的$n-1$条边,保证这$n-1$条边形成一棵树. 接下来一行一个整 ...
- PHP 设计模式总结
回想了一下php的设计模式,好像记得不完全了.此处对php设计模式重新做一下复习总结. 单例模式 单例模式的核心只包括一个特殊的类,保证系统中只能有一个实例,即一个类中只能有一个实例化对象,避免系统中 ...
- Delphi XE2 之 FireMonkey 入门(16) - 滤镜: 实例测试
窗体上需要 TImage.TOpenDialog 和六个按钮. unit Unit1; interface uses System.SysUtils, System.Types, System.U ...
- tcpdump中文帮助
TCPDUMP(8) System Manager's Manual ...
- usb接口类型 简单分类辨识
usb接口类型 简单分类辨识 - [相似百科] 庆欣 0.0 4 人赞同了该文章 1. 先放图,随着越来越多的接触智能设备,会遇到各种各样的usb接口,对于很多人来说,接口类型只有:usb接口,安卓接 ...
- 在centos7.4 nginx mysql php部署 thinkphp5.0 项目
系统 centos7 环境 php 7.1.3 nignx 1.12.2 mysql 5.5.6 我是通过lnmp 集成环境安装 fastcgi.conf 末尾添加 vim fastcig.conf ...
- 【HANA系列】SAP HANA DB 和SAP HANA studio version查看
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA DB 和SAP ...
- 查询IP地址
在黑窗口里面输入:ipconfig
- 信息收集【采集点OWASP CHINA】网址http://www.owasp.org.cn/
以下部分源于 安全家 http://www.anquanjia.net.cn/newsinfo/729480.html 资源虽多,优质却少.不要被信息海迷惑的心智,新人要想入门,除了优质的系统教学资源 ...