不要温柔地走入promise
2015-07-31 23:46
281 查看
第一步
第二步
第三步
第四步
第五步
第六步
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ionic中的$ionicModal使用方法
- kernel中常用数据结构之链表
- 顺序表应用举例
- （转载）Objective-c的@property 详解
- 健康顺口溜
- hdu 5336 XYZ and Drops 【BFS模拟】
- 转：OpenJDK和SunJDK的区别和联系
- hihoCoder 1039 字符消除
- Aircrack-ng支持网卡列表(下)
- 云计算在企业中的应用(2)
- hd 2187
- 一步步学习操作系统（2）——在STM32上实现一个可动态加载kernel的"my-boot"
- jquery属性选择器
- 今天
- 对sql的查询语句做成对象式，简单实现。查询参数实现一
- 使用drbd结合corosync实现mysql的高可用集群服务
- 《显示数字时钟》
- 数据库系统应用一：工资管理系统系列一
- HDU - 1142 A Walk Through the Forest （DP ＋ 最短路）
- linux 系统tty、pty和pts 的概念及区别