不要温柔地走入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事件提供 ...
随机推荐
- LR场景设置里的各参数解释
1.Start Vuser ep1: Strat 100 Vusers :2 every 00:00:15(HH:MM:SS) 解释: 场景总共要跑100个虚拟用户,每15秒启动2个虚拟用户Vuser ...
- Javascript Regexp match and replace
# add a new article reference to database function addnewpub() { var year = $("input#year" ...
- Spring注解@Scheduled定时任务
一.首先配置applicationContext-task.xml (1)添加 xmlns:task="http://www.springframework.org/schema/task& ...
- web.xml中 error-page的正确用法
<error-page> <error-code>404</error-code> <location>/mvc/hello1?i=1</loca ...
- Android网络传输中必用的两个加密算法:MD5 和 RSA (附java完成测试代码)
MD5和RSA是网络传输中最常用的两个算法,了解这两个算法原理后就能大致知道加密是怎么一回事了.但这两种算法使用环境有差异,刚好互补. 一.MD5算法 首先MD5是不可逆的,只能加密而不能解密.比如明 ...
- Greenplum迁移到配置不同的GP系统
要使用gp_restore或gpdbrestore并行恢复操作,恢复的系统必须与备份的系统具有相同的配置(相同数量的Instance).如果想要恢复数据库对象和数据到配置不同的系统(比如系统扩展了更多 ...
- 使用epel源安装依赖包时报错
[root@test_web1 ~]# rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch. ...
- easyrtc-server在ubuntu14.04上的安装方法
easyrtc 官网 http://easyrtc.com/ 1.安装nodejs,安装npm (不知道如何安装请google一下) 2. 查看运行easyrtc 所需要的js 包,在easyrtc ...
- miniUI子窗口调父窗口方法
window.Owner.XXX 其中XXX是父窗口里的方法名
- 20151210001 DataGridView 选中与被选中
// DataSet_IP list private void DataSet_IP_list() { DataSet_IP = new System ...