不要温柔地走入promise
第一步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链式化</title>
<script type="text/javascript">
(function(){
function Promise(fn){
var instance = this;
instance["_value"] = ""; var resolve = function(val){
instance["_value"] = val;
}; fn(resolve);
}
var promise_proto = Promise.prototype; promise_proto.then = function(successFn){
var instance = this; return new Promise(function(resolve){
var resolveWrapper = function(val){
var ret = successFn(val);
if(typeof(ret) != "undefined" && ret.constructor === Promise){
ret.then(function(info){
resolve(info);
});
}
else{
return ret;
}
} resolveWrapper(instance["_value"]);
});
};
window.Promise = Promise;
})(); (function(){
return new Promise(function(resolve){
resolve(1);
})
})()
.then(function(info){
return new Promise(function(resolve){
console.log(info);
resolve(2);
})
})
.then(function(info){
console.log(info);
});
</script>
</head>
<body>
new Promise返回一个新空间P1，
P1里面有匿名函数function(resolve){resolve(1);}) 和 匿名函数 function(info){
console.log(info);
return new Promise(function(resolve){
resolve(2);
})
}
P1运动方式：
1.内部生成resolve函数，并注入到第一个匿名函数，也就是resolve(1)。执行resolve(1)，也就是把1赋值给P1里面的一个变量_value。
2.把_value注入到第二个匿名函数,然后执行第二个匿名函数，根据第二个匿名函数返回是否为Promise类型，来觉得下一步。
</body>
</html>
第二步
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>promise化</title>
<!--<script src="promise.js" type="text/javascript"></script>-->
<script type="text/javascript">
(function() {
var PENDING = 0,
RESOLVED = 1,
Promise = function(fn) {
var instance = this;
instance["_value"] = "",
resolve = function(val) {
instance.resolve(val);
};
instance["_status"] = PENDING;
instance["_onResolved"] = [];
fn(resolve);
},
promise_proto = Promise.prototype;
promise_proto.then = function(successFn) {
var instance = this;
// 返回一个新的Promise实例
return new Promise(function(resolve) {
var resolveWrapper = function(val) {
// 执行than传入的successFn
var ret = successFn(val);
// 返回的也是Promise类型则
if (typeof(ret) != "undefined" && ret.constructor === Promise) {
// 给它than一个，
ret.then(function(info) {
// 触发第二个than进入的函数
resolve(info);
});
} else {
resolve(ret);
}
};
// 这里的instance是上一个Promise实例
instance._onResolved.push(resolveWrapper);
// 上一个instance已经resolve执行了，
if (instance._status === RESOLVED) {
resolveWrapper(instance._value);
}
});
};
promise_proto.resolve = function(val) {
if (this._status === PENDING) {
this._status = RESOLVED;
this._value = val;
for (var i = 0, len = this._onResolved.length; i < len; i++) {
this._onResolved[i](val);
}
}
};
window.Promise = Promise;
})(); (function() {
return new Promise(function(resolve) {
console.log(0);
setTimeout(function() {
resolve(1);
}, 3000);
})
})()
.then(function(info) {
console.log(info);
return new Promise(function(resolve) {
setTimeout(function(){
resolve(2);
},2000); })
})
.then(function(info) {
console.log(info);
});
</script>
</head> <body>
</body> </html>
第三步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>all函数</title>
<!--<script src="promise.js" type="text/javascript"></script>-->
<script type="text/javascript">
(function() {
var PENDING = 0,
RESOLVED = 1,
Promise = function(fn) {
var instance = this;
instance["_value"] = "",
resolve = function(val) {
instance.resolve(val);
};
instance["_status"] = PENDING;
instance["_onResolved"] = [];
fn(resolve);
},
promise_proto = Promise.prototype; promise_proto.then = function(successFn) {
var instance = this;
// 返回一个新的Promise实例
return new Promise(function(resolve) {
var resolveWrapper = function(val) {
// 执行than传入的successFn
var ret = successFn(val);
// 返回的也是Promise类型则
if (typeof(ret) != "undefined" && ret.constructor === Promise) {
// 给它than一个，
ret.then(function(info) {
// 触发第二个than进入的函数
resolve(info);
});
} else {
resolve(ret);
}
};
// 这里的instance是上一个Promise实例
instance._onResolved.push(resolveWrapper);
// 上一个instance已经resolve执行了，
if (instance._status === RESOLVED) {
resolveWrapper(instance._value);
}
});
};
promise_proto.resolve = function(val) {
if (this._status === PENDING) {
this._status = RESOLVED;
this._value = val;
for (var i = 0, len = this._onResolved.length; i < len; i++) {
this._onResolved[i](val);
}
}
};
Promise.all = function (arr) {
return new Promise(function (resolve) {
var len = arr.length,
i = -1,
count = 0,
results = [];
while (++i < len) {
~function (i) {
arr[i].then(
function (val) {
results[i] = val;
if (++count === len) {
resolve(results);
}
},
function () {
console.log("没有执行完");
}
);
}(i);
}
});
};
window.Promise = Promise;
})();
</script>
<script type="text/javascript">
var a1 = new Promise(function(resolve,reject){
resolve(1);
}); var a2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve(2);
},2000) }); var a3 = new Promise(function(resolve,reject){
resolve(3);
}); Promise.all([a1,a2,a3]).then(function(value){
console.log(value);
});
</script>
</head>
<body>
</body>
</html>
第四步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>race函数</title>
<!--<script src="promise.js" type="text/javascript"></script>-->
<script type="text/javascript">
(function() {
var PENDING = 0,
RESOLVED = 1,
Promise = function(fn) {
var instance = this;
instance["_value"] = "",
resolve = function(val) {
instance.resolve(val);
};
instance["_status"] = PENDING;
instance["_onResolved"] = [];
fn(resolve);
},
promise_proto = Promise.prototype; promise_proto.then = function(successFn) {
var instance = this;
// 返回一个新的Promise实例
return new Promise(function(resolve) {
var resolveWrapper = function(val) {
// 执行than传入的successFn
var ret = successFn(val);
// 返回的也是Promise类型则
if (typeof(ret) != "undefined" && ret.constructor === Promise) {
// 给它than一个，
ret.then(function(info) {
// 触发第二个than进入的函数
resolve(info);
});
} else {
resolve(ret);
}
};
// 这里的instance是上一个Promise实例
instance._onResolved.push(resolveWrapper);
// 上一个instance已经resolve执行了，
if (instance._status === RESOLVED) {
resolveWrapper(instance._value);
}
});
};
promise_proto.resolve = function(val) {
if (this._status === PENDING) {
this._status = RESOLVED;
this._value = val;
for (var i = 0, len = this._onResolved.length; i < len; i++) {
this._onResolved[i](val);
}
}
};
Promise.all = function (arr) {
return new Promise(function (resolve) {
var len = arr.length,
i = -1,
count = 0,
results = [];
while (++i < len) {
~function (i) {
arr[i].then(
function (val) {
results[i] = val;
if (++count === len) {
resolve(results);
}
},
function () {
console.log("没有执行完");
}
);
}(i);
}
});
};
Promise.race = function (arr) {
return new Promise(function (resolve, reject) {
var len = arr.length,
i = -1;
// 给每一个都套上then，谁先完成，先resolve
while (++i < len) {
arr[i].then(
function (val) {
resolve(val);
},
function (val) {
reject(val);
}
);
}
});
};
window.Promise = Promise;
})();
</script>
<script type="text/javascript">
var a1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve(1);
},5000) }); var a2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve(2);
},2000) }); var a3 = new Promise(function(resolve,reject){
resolve(3);
}); Promise.race([a1,a2,a3]).then(function(value){
console.log(value);
});
</script>
</head>
<body>
</body>
</html>
第五步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加入reject函数</title>
<!--<script src="promise.js" type="text/javascript"></script>-->
<script type="text/javascript">
(function() {
var PENDING = 0,
RESOLVED = 1,
REJECTED = 2,
Promise = function(fn) {
var instance = this;
instance["_value"] = "",
resolve = function(val) {
instance.resolve(val);
};
reject = function(val){
instance.reject(val);
} instance["_status"] = PENDING;
instance["_onResolved"] = [];
instance["_onRejected"] = []; fn(resolve, reject);
},
promise_proto = Promise.prototype; promise_proto.then = function(successFn, failFn) {
var instance = this;
// 返回一个新的Promise实例
return new Promise(function(resolve, reject) {
var resolveWrapper = function(val) {
// 执行than传入的successFn
var ret = successFn(val);
// 返回的也是Promise类型则
if (typeof(ret) != "undefined" && ret.constructor === Promise) {
// 给它than一个，
ret.then(function(info) {
// 触发第二个than进入的函数
resolve(info);
},function(info){
reject(info);
});
} else {
resolve(ret);
}
}; var rejectWrapper = function(val){
// 执行than传入的successFn
var ret = failFn(val);
// 返回的也是Promise类型则
if (typeof(ret) != "undefined" && ret.constructor === Promise) {
// 给它than一个，
ret.then(function(info) {
// 触发第二个than进入的函数
resolve(info);
},function(info){
reject(info);
});
} else {
reject(ret);
}
} // 这里的instance是上一个Promise实例
instance._onResolved.push(resolveWrapper);
instance._onRejected.push(rejectWrapper); // 上一个instance已经resolve执行了，
if (instance._status === RESOLVED) {
resolveWrapper(instance._value);
} if(instance._status === REJECTED){
rejectWrapper(instance._value);
}
});
};
promise_proto.resolve = function(val) {
if (this._status === PENDING) {
this._status = RESOLVED;
this._value = val;
for (var i = 0, len = this._onResolved.length; i < len; i++) {
this._onResolved[i](val);
}
}
};
promise_proto.reject = function(val) {
if (this._status === PENDING) {
this._status = REJECTED;
this._value = val;
for (var i = 0, len = this._onRejected.length; i < len; i++) {
this._onRejected[i](val);
}
}
}; Promise.all = function (arr) {
return new Promise(function (resolve) {
var len = arr.length,
i = -1,
count = 0,
results = [];
while (++i < len) {
~function (i) {
arr[i].then(
function (val) {
results[i] = val;
if (++count === len) {
resolve(results);
}
},
function () {
console.log("没有执行完");
}
);
}(i);
}
});
};
Promise.race = function (arr) {
return new Promise(function (resolve, reject) {
var len = arr.length,
i = -1;
// 给每一个都套上then，谁先完成，先resolve
while (++i < len) {
arr[i].then(
function (val) {
resolve(val);
},
function (val) {
reject(val);
}
);
}
});
};
window.Promise = Promise;
})();
</script>
<script type="text/javascript">
(function(){
return new Promise(function(resolve,reject){
reject("失败一下");
})
})()
.then(function(successInfo){
return new Promise(function(resolve,reject){
console.log(info);
resolve(2,3,4);
})
},function(failInfo){
console.log(failInfo);
return new Promise(function(resolve,reject){ setTimeout(function(){
resolve("从失败走向成功",1,2);
},3000); })
})
.then(function(successInfo){
console.log(successInfo);
return new Promise(function(resolve, reject){
reject("从成功走向失败");
})
}, function(){})
.then(function(){ },function(failInfo){
console.log(failInfo);
}); </script>
</head>
<body>
</body>
</html>
第六步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>传递参数丰富化</title>
<script type="text/javascript">
(function() {
var PENDING = 0,
RESOLVED = 1,
REJECTED = 2,
array_proto = Array.prototype,
Promise = function(fn) {
var instance = this;
instance["_value"] = "",
resolve = function(val) {
instance.resolve.apply(instance, arguments);
};
reject = function(val){
instance.reject.apply(instance, arguments);
} instance["_status"] = PENDING;
instance["_onResolved"] = [];
instance["_onRejected"] = []; fn(resolve, reject);
},
promise_proto = Promise.prototype; promise_proto.then = function(successFn, failFn) {
var instance = this;
// 返回一个新的Promise实例
return new Promise(function(resolve, reject) {
var resolveWrapper = function(val) {
// 执行than传入的successFn
var ret = successFn.apply(instance,arguments);
// 返回的也是Promise类型则
if (typeof(ret) != "undefined" && ret.constructor === Promise) {
// 给它than一个，
ret.then(function(info) {
// 触发第二个than进入的函数
resolve.apply(instance,arguments);
},function(info){
reject.apply(instance,arguments);
});
} else {
resolve(ret);
}
}; var rejectWrapper = function(val){
// 执行than传入的successFn
var ret = failFn.apply(instance,arguments);
// 返回的也是Promise类型则
if (typeof(ret) != "undefined" && ret.constructor === Promise) {
// 给它than一个，
ret.then(function(info) {
// 触发第二个than进入的函数
resolve.apply(instance,arguments);
},function(info){
reject.apply(instance,arguments);
});
} else {
reject(ret);
}
} // 这里的instance是上一个Promise实例
instance._onResolved.push(resolveWrapper);
instance._onRejected.push(rejectWrapper); // 上一个instance已经resolve执行了，
if (instance._status === RESOLVED) {
resolveWrapper.apply(instance,instance._value);
} if(instance._status === REJECTED){
rejectWrapper.apply(instance,instance._value);
}
});
};
promise_proto.resolve = function(val) {
if (this._status === PENDING) {
this._status = RESOLVED;
this._value = arguments;
for (var i = 0, len = this._onResolved.length; i < len; i++) {
this._onResolved[i].apply(this, arguments);
}
}
};
promise_proto.reject = function(val) {
if (this._status === PENDING) {
this._status = REJECTED;
this._value = arguments;
for (var i = 0, len = this._onRejected.length; i < len; i++) {
this._onRejected[i].apply(this, arguments);
}
}
}; promise_proto.catch = function (onRejected) {
return this.then(null, onRejected);
} Promise.all = function (arr) {
return new Promise(function (resolve) {
var len = arr.length,
i = -1,
count = 0,
results = [];
while (++i < len) {
~function (i) {
arr[i].then(
function (val) {
results[i] = array_proto.slice.call(arguments);
if (++count === len) {
resolve.apply(this,results);
}
},
function () {
console.log("没有执行完");
}
);
}(i);
}
});
};
Promise.race = function (arr) {
return new Promise(function (resolve, reject) {
var len = arr.length,
i = -1;
// 给每一个都套上then，谁先完成，先resolve
while (++i < len) {
arr[i].then(
function (val) {
// resolve(val);
resolve.apply(this,arguments)
},
function (val) {
// reject(val);
reject.apply(this,arguments)
}
);
}
});
};
window.Promise = Promise;
})();
</script>
<script type="text/javascript">
/* (function(){
return new Promise(function(resolve,reject){
reject("失败一下",1,2);
})
})()
.then(function(successInfo){
return new Promise(function(resolve,reject){
resolve(2);
})
},function(failInfo){
console.log(arguments);
return new Promise(function(resolve,reject){
resolve("从失败走向成功",2,3);
})
})
.then(function(successInfo1, successInfo2, successInfo3){
console.log(arguments);
return new Promise(function(resolve, reject){
reject("从成功走向失败");
})
}, function(){})
.then(function(){ },function(failInfo){
console.log(failInfo);
});*/
</script> <script type="text/javascript">
/*var a1 = new Promise(function(resolve,reject){
resolve(1,1);
}); var a2 = new Promise(function(resolve,reject){
resolve(2,2); }); var a3 = new Promise(function(resolve,reject){
resolve(3,3);
}); Promise.all([a1,a2,a3]).then(function(val1,val2,val3){
console.log(val1);
console.log(val2);
console.log(val3);
});*/
</script> <script type="text/javascript">
/*var a1 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve(1);
},5000) }); var a2 = new Promise(function(resolve,reject){
setTimeout(function(){
resolve(2);
},2000) }); var a3 = new Promise(function(resolve,reject){
reject(5,6);
}); Promise.race([a1,a2,a3]).then(function(value,value2){
console.log(value);
console.log(value2);
},function(value,value2){
console.log(value);
console.log(value2);
});*/
</script> <script type="text/javascript">
(function(){
return new Promise(function(resolve,reject){
reject("失败一下",1,2);
})
})()
.catch(function(failInfo){
console.log(arguments);
return new Promise(function(resolve,reject){
resolve("从失败走向成功",2,3);
})
});
</script>
</head>
<body>
</body>
</html>
不要温柔地走入promise的更多相关文章
- 不要温柔地走入AMD
1.无依赖情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 一篇文章彻底搞懂异步，同步，setTimeout，Promise，async
之前翻看别的大佬的博客看到了关于setTimeout,promise还有async执行顺序的文章.观看了几篇之后还是没有怎么看懂,于是自己开始分析代码,并整理了此文章,我相信通过此文章朋友们能对异步同 ...
- 浅谈Promise
学习过JavaScript的人都知道,JavaScript是单线程作业,这样会有一个很大的缺陷,所有的Ajax,浏览器事件等,都是通过异步去完成.所谓的同步和异步最大的区别无非就是在于同步会阻塞后续代 ...
- ES6语法（3）—— 用promise（）对象优雅的解决异步操作
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ...
- Javascript - Promise学习笔记
最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...
- 路由的Resolve机制（需要了解promise）
angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...
- angular2系列教程（七）Injectable、Promise、Interface、使用服务
今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...
- 闲话Promise机制
Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...
- 深入理解jQuery、Angular、node中的Promise
最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...
随机推荐
- split function of Perl,Python,Awk
使用中常用到Perl,Python,AWK,R, 虽然Java,C,C++,Vala也学过但是就是不喜欢,你说怎么办. 看来一辈子脚本的命. Perl @rray = split /PATTERN/, ...
- PHP无限级分类-递归（不推荐）
[http://www.helloweba.com/view-blog-204.html] 在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢? ...
- SQL Server 索引和表体系结构（三）
转自:http://www.cnblogs.com/chenmh/p/3785285.html 包含列索引 概述 包含列索引也是非聚集索引,索引结构跟聚集索引结构是一样,有一点不同的地方就是包含列索引 ...
- c#xml追加读取节点
读取 if (File.Exists("Book.xml")) { XmlDocument doc = new XmlDocument(); doc.Load("Book ...
- Let the Balloon Rise 分类： HDU 2015-06-19 19:11 7人阅读 评论(0) 收藏
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- 动态规划(DP)，模拟
题目链接:http://poj.org/problem?id=1088 Memory: 252KTime: 16MSLanguage: C++Result: Accepted 解题报告: 1.lm[i ...
- Axure一点
自己的感受:非常的考脑,上课要集中120分精神. Axure(快速制作网页原型) 1:全局变量:a:在菜单栏中可以新建全局变量. b:控制全部网页. c:取到输入框的值,设置User的值等于输入框的值 ...
- AWR报告-数据库概要信息（一）
Elapse time为两个Snap时间间隔,相当于取样时间差 DB Time : db time= cpu time + wait time(不包含空闲等待)(非后台进程) 说白了就是db tim ...
- 灰色预测模型 c# 算法实现
public class GrayModel { private double a0, a1, a2; private int size; priva ...
- 精通D3.js学习笔记（1）基础的函数
买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素 select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var i ...