第一步
<!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>