不要温柔地走入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事件提供 ...
随机推荐
- 161208、Java enum 枚举还可以这么用
在大部分编程语言中,枚举类型都会是一种常用而又必不可少的数据类型,Java中当然也不会例外.然而,Java中的Enum枚举类型却有着许多你意想不到的用法,下面让我们一起来看看. 先来看一段代码示例: ...
- OBD 14230 Slow, Addr激活
const u8 LinkCmd14230[6] = { 0xC2, 0x33, 0xF1, 0x01, 0x00, 0xE7 }; u8 ISO14230ADDR_Check(){ ...
- MVP MVC MVVM 傻傻分不清
最近MVC (Model-View-Controller) 和MVVM (Model-View-ViewModel) 在微软圈成为显学,ASP.NET MVC 和WPF 的Prism (MVVM Fr ...
- PHP中关于 basename、dirname、pathinfo 详解
basename(url) 返回路径中的文件名部分. dirname(url) 返回路径中的目录名称部分. pathinfo(url) 返回关于文件路径的信息. bas ...
- 查看mysql的状态
实时查看mysql状态连接数 查询数 etc mysqladmin -uroot -p '' -h status -i 1
- coco2dx服务器简单例子
实现的单个socket例子,了解socket原理. 先创建一个win32的项目(命令行的),作为服务端 // SocketServer.cpp : 定义控制台应用程序的入口点.// #include ...
- C语言的数组名和对数组名取地址
http://blog.csdn.net/zdcsky123/article/details/6517811 相信不少的C语言初学者都知道,数组名相当于指针,指向数组的首地址,而函数名相当于函数指针, ...
- javaBean的使用方法；
在jsp页面中使用javaBean:三个标签: <jsp:useBean>标签 <jsp:setProperty>标签 <jsp:getProperty>标签 首先 ...
- poj1703 Lost Cows
给定集合{1,2,...,n}的一个置换,指定每个位置上在其左方且比其小的数的个数,求该置换. 这题我目前还只会O(n^2)的做法. 以后再用更高效的算法解决. http://poj.org/prob ...
- Behavior Designer中的内置消息机制
最近在用Behavior Designer,其中需要用到消息机制,看了一下其中自带了这套东西 注册 Owner.RegisterEvent<string>("Message&qu ...