ES6 Promise.then的原始碼(跟著大大寫的)
阿新 • • 發佈:2019-01-07
寫原始碼可以瞭解一個函式的本質,通過對原始碼的理解可以讓你對知識有更多的瞭解,歡迎大家留言交流學習。
function myPromise(fn){ if(typeof(fn) !== 'function'){ throw Error (`Promise resolver ${fn} is not a function`) } let _this=this; this.status="pending"; this.data=null; this.resolvedArr=[]; this.rejectedArr=[]; function resolved(data){ setTimeout(() => { if(_this.status=='pending'){ _this.status = 'resolved'; _this.data = data; _this.resolvedArr.forEach(function(fn){ return fn(); }) } }, 0); } function rejected(err){ setTimeout(() => { if (_this.status=='pending') { _this.status = "rejected"; _this.data =err; } }, 0); } fn(resolved,rejected); } myPromise.prototype.then=function(onResolved,onRejected){ let _this = this; if(_this.status=='resolved'){ return new myPromise(function(resolved,rejected){ let res= onResolved(_this.data) if( res instanceof myPromise){ //判斷res 是不是 myPromise的例項 res.then(resolved,rejected) }else{ resolved(res); } }) } if(_this.status == 'rejected'){ return new myPromise(function(resolved,rejected){ let res= onResolved(_this.data) if( res instanceof myPromise){ //判斷res 是不是 myPromise的例項 res.then(resolved,rejected) }else{ resolved(res); } }) } if(_this.status == 'pending'){ return new myPromise(function(resolved,rejected){ _this.resolvedArr.push((function (onResolved){ return function (){ var res = onResolved(_this.data) if(res instanceof myPromise){ res.then(resolved,rejected) }else{ resolved(res) } } })(onResolved)) _this.rejectedArr.push((function (onRejected) { return function () { var res = onRejected(_this.data) if(res instanceof myPromise) { res.then(resolved, rejected) } else { resolved(res) } } } )(onRejected)) }) } } var p2=new myPromise(function(resolved,rejected){ resolved('sasasa'); }); p2.then(function(data){ console.log(data) },function(data){ console.log(data) })
用class寫promise原始碼
class myPromise{ constructor(fn){ if(typeof(fn) !== 'function'){ throw Error (`Promise resolver ${fn} is not a function`) } this.status="pending"; this.data=null; this.resolvedArr=[]; this.rejectedArr=[]; let _this=this function resolved(data){ setTimeout(() => { if(_this.status=='pending'){ _this.status = 'resolved'; _this.data = data; _this.resolvedArr.forEach((fn)=>fn()) } }, 0); } function rejected(err){ setTimeout(() => { if (_this.status=='pending') { _this.status = "rejected"; _this.data =err; } }, 0); } fn(resolved,rejected) } then(onResolved,onRejected){ let _this = this; if(_this.status=='resolved'){ return new myPromise((resolved,rejected)=>{ let res= onResolved(_this.data) if( res instanceof myPromise){ //判斷res 是不是 myPromise的例項 res.then(resolved,rejected) }else{ resolved(res); } }) } if(_this.status == 'rejected'){ return new myPromise((resolved,rejected)=>{ let res= onResolved(_this.data) if( res instanceof myPromise){ //判斷res 是不是 myPromise的例項 res.then(resolved,rejected) }else{ resolved(res); } }) } if(_this.status == 'pending'){ return new myPromise((resolved,rejected)=>{ _this.resolvedArr.push(((onResolved)=> ()=>{ let res = onResolved(_this.data) if(res instanceof myPromise){ res.then(resolved,rejected) }else{ resolved(res) } })(onResolved)) _this.rejectedArr.push(((onRejected)=> ()=> { let res = onRejected(_this.data) if(res instanceof myPromise) { res.then(resolved, rejected) } else { resolved(res) } } )(onRejected)) }) } } }