实现简单的promise
只考虑成功时的调用,方便理解一下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的更多相关文章
- 一个简单的Promise 实现
用了这么长时间的promise,也看了很多关于promise 的文章博客,对promise 算是些了解.但是要更深的理解promise,最好的办法还是自己实现一个. 我大概清楚promise 是对异步 ...
- 如何用原生JS实现一个简单的promise
我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...
- 简单版 Promise/A+,通过官方872个测试用例
promise 标准 在实现 Promise 之前要清楚的是 JavaScript 中的 Promise 遵循了 Promises/A+ 规范,所以我们在编写 Promise 时也应当遵循这个规范,建 ...
- 聊一聊看似简单的Promise.prototype.then()方法
Promise.prototype.then() Proise实例的then方法是定义在原型对象Promise.prototype上的,它的作用是为Promise实例添加状态改变时的回调函数. 该方法 ...
- 简单模拟 Promise
class promise { constructor(fn) { this.data = null; this.err = null; this.isPromise = false; this.er ...
- [手写系列] 带你实现一个简单的Promise
简介 学习之前 需要先对Promise有个基本了解哦,这里都默认大家都是比较熟悉Promise的 本次将带小伙伴们实现Promise的基本功能 Promise的基本骨架 Promise的then Pr ...
- 简单的 Promise 实现
参考 http://www.tuicool.com/articles/RzQRV3 var PENDING = undefined, FULLFILLED = 1, REJECTED = 2; var ...
- 简单的 Promise 实现 一
const Promise = function(fn){ let state = { pending: "pending", fulfilled: "fulfilled ...
- 手写简单的promise
function Promise(fn) { var that = this; this.status = "pedding"; this.value = undefined; / ...
随机推荐
- Groovy里面闭包中变量符号的查找与变量定义的限制
class a { def v1 = "v1 in a" static def v2 = "v2 in a" def v4 = "v4 in a&qu ...
- go 【第二篇】包、变量、函数
包 初试 每个 Go 程序都是由包组成的. 程序运行的入口是包 `main`. 这个程序使用并导入了包 "fmt" 和 `"math/rand"`. 按照惯例, ...
- C. Neko does Maths(数论 二进制枚举因数)
题目链接:https://codeforces.com/contest/1152/problem/C 题目大意:给你a和b,然后让你找到一个k,使得a+k和b+k的lcm. 学习网址:https:/ ...
- kali下的webshell工具-Weevely
Weevely ------------------------------------------------ 主要特点: · 隐蔽的类终端的PHP webshell · ...
- anylogic 使用
1.智能体群的用法有人会问:请问怎么给生成的两个对象赋予属性,比如在分叉的时候一个进入sink1,另一个进入sink2?我想source生成不同的实体,而且各个实体都有不同的属性,请问应该怎么设置呢? ...
- 使用Setup factory打包WPF
软件环境 Win10 .NET452 WPF Setup Factory 工具直接百度下啦,关键词:Setup Factory 95 With Sn 打包过程主要参考了以下文章: https://ww ...
- php递归实现一维数组转为指定树状结构 --- 省市区处理
### 这两天脑壳痛,一时短路,想不到准备利用递归实现这个需求,最后还是要请教同事,回来自己在实现了一遍,并记录下来 ### 原数据: // { // 广东省: { // 广州市: [ // &quo ...
- Oracle建立全文索引详解
Oracle建立全文索引详解1.全文检索和普通检索的区别 不使用Oracle text功能,当然也有很多方法可以在Oracle数据库中搜索文本,比如INSTR函数和LIKE操作: SELECT *FR ...
- ios自带的返回按键,点击不刷新页面
1.因为是微信端页面,需要获取用户基本信息和设置微信分享朋友圈等功能,ios自带的返回键没有这个功能,导致config配置不成功,该隐藏的按钮没有隐藏. 解决方法,在子页面添加一下js代码即可.链接的 ...
- C# 高级编程01----.Net基础介绍
一.C#与.Net 的关系 1)C#语言 1. C#是一种简洁.类型安全的面向对象语言,可以使用C#语言创建可以在.Net Framework上运行的应用程序 2. C# 语言功能取决于.Net 的功 ...