不要温柔地走入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事件提供 ...
随机推荐
- 【secureCRT】永久设置背景色和文字颜色
- KindEditor图片批量上传
KindEditor编辑器图片批量上传采用了上传插件swfupload.swf,所以后台上传文件方法返回格式应为JSONObject的String格式(注). JSONObject格式: JSONOb ...
- oracle 创建表空间用户
1.创建普通表空间和用户 //创建临时表空间create temporary tablespace oa_temptempfile 'D:\app\Administrator\oradata\orcl ...
- Positional parameter are considered deprecated; use named parameters or JPA-style positional parameters instead.
这行代码: List<Cat> catList =session.createQuery("from Cat p where p.name.first_name=?") ...
- java 数组基本操作（一维）
1.数组的声明: 数组类型 数组名[] 2.数组的表示方法 想使用数组中的值,可以使用索引来实现,数组是从0开始的,使用时格式为:数组名[i],比如 a[1],代表第二个值 在数组中要使用数组的长度 ...
- c# 遍历子控件,比如Form下的group,或者panel
方法很好用.目的是遍历所有容器的子控件... 方法1private void GetControl(Control.ControlCollection ctc, ref int checkNull) ...
- Sublime Text2一些快捷键收藏
快捷键 XP版 Ctrl+P 搜索文件 Ctrl+R 搜索方法 ...
- extjs 中动态给gridpanel 复选框赋值
最近在搞extjs时需要动态根据数据给gridpanel的复选框赋值 网上看了很多 ,多不行,最后找到一个好使的方法 如下: RBACformPanel.getSelectionModel().sel ...
- Sudoku
Sudoku Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 15952 Accepted: 7791 Special Judge ...
- Unix网络编程--卷二：进程间通信
Unix网络编程--卷二:进程间通信 本书是一部Unix网络编程的经典之作!进程间通信(IPC)几乎是所有Unix程序性能的关键,理解IPC也是理解如何开发不同主机网络应用程序的必要条件.本书从对Po ...