>[success] # 實現一個自己的Promise ~~~ 1.Promise ?三種狀態?pending??fulfilled?rejected ，三種狀態依次為"進行中"、"操作成功已處理的狀態" "操作失失敗的已處理狀態"，狀態不可逆即只能 'pending =》fulfilled' 和 'pending=>rejected ' 2.Promise 的 executor（執行器） 里的代碼是同步的,也就是構造函數傳遞的回調函數參數， new Promise((resolve,?reject)?=>{}) => 其中(resolve,?reject)?=>{} 就是 executor ~~~ [# Promises/A+](https://promisesaplus.com/) >[info] ## 實現一個Promise ~~~ 1.{1} executor（執行器） 是同步的，因此這里是一個同步方法調用 2.如果忘了具體的參考前端開發核心知識階級這本書復習一下 ~~~ >[danger] ##### Promise 實現代碼 ~~~ function resolvePromise(promise2, x, resolve, reject) { var then var thenCalledOrThrow = false if (promise2 === x) { return reject(new TypeError('Chaining cycle detected for promise!')) } if (x instanceof Promise) { if (x.status === 'pending') { x.then(function(v) { resolvePromise(promise2, v, resolve, reject) }, reject) } else { x.then(resolve, reject) } return } if ((x !== null) && ((typeof x === 'object') || (typeof x === 'function'))) { try { then = x.then if (typeof then === 'function') { then.call(x, function rs(y) { if (thenCalledOrThrow) return thenCalledOrThrow = true return resolvePromise(promise2, y, resolve, reject) }, function rj(r) { if (thenCalledOrThrow) return thenCalledOrThrow = true return reject(r) }) } else { resolve(x) } } catch (e) { if (thenCalledOrThrow) return thenCalledOrThrow = true return reject(e) } } else { resolve(x) } } ~~~ * 這里是核心 ~~~ function MPromise(exectutor){ this.onFulfilledArray = [] this.onRejectedArray = [] this.status = "pending"; this.value = null; this.reason = null; const resolve = value => { if(value instanceof Promise){ return value.then(resolve, reject) } setTimeout(()=>{ if(this.status === "pending"){ this.value = value; this.status = "fulfilled"; this.onFulfilledArray.forEach(fun=>{ fun(this.value) }) } }) } const reject = reason => { setTimeout(()=>{ if(this.status === "pending"){ this.reason = reason this.status = "rejected"; this.onRejectedArray.forEach(fun=>{ fun(this.reason) }) } }) } try{ exectutor(resolve, reject) // {1} }catch(e){ reject(e) } } MPromise.prototype.then = function(onfulfilled , onrejected){ // 根據標準，如果then的參數不是function，則需要忽略它 onfulfilled = typeof onfulfilled === "function" ? onfulfilled:data=>data; onrejected = typeof onrejected === "function" ? onrejected : error=>{throw error} // Promise 鏈式調用 then 返回的依舊是一個promise let promise2 if(this.status === "fulfilled"){ return promise2 = new MPromise((resolve, reject)=>{ setTimeout(()=>{ try{ // 因為promise的exectutor 是同步的相當于 // 此時聲明promise2 時候 已經開始內部調用 // 這個 onfulfilled(this.value) 是當前的promise 執行拿到值 const res = onfulfilled(this.value) // 鏈式調用拿到是上一個promsie 返回值 也就是此時res // promise2的resolve 傳遞上個promise 值結果 resolvePromise(promise2, x, resolve, reject) }catch(e){ reject(e) } }) }) } if(this.status === "rejected"){ return promise2 = new MPromise((resolve, reject)=>{ setTimeout(()=>{ try{ // 因為promise的exectutor 是同步的相當于 // 此時聲明promise2 時候 已經開始內部調用 // 這個 onrejected(this.value) 是當前的promise 執行拿到值 const res = onrejected(this.value) resolvePromise(promise2, x, resolve, reject) }catch(e){ reject(e) } }) }) } if(this.status === "pending"){ return new Promise((resolve, reject) =>{ this.onFulfilledArray.push((value)=>{ try { var x = onfulfilled(value) resolvePromise(promise2, x, resolve, reject) } catch (r) { reject(r) } }) this.onRejectedArray.push((reason)=>{ try { var x = onrejected(reason) resolvePromise(promise2, x, resolve, reject) } catch (r) { reject(r) } }) }) } } const promise = new MPromise((resolve, reject) =>{ // setTimeout(()=>{ console.log(100) resolve(101) // },1000) }) promise.then((data)=>{ console.log(777); console.log(data); }) promise.then((data)=>{ console.log(888); console.log(data); }) // const promise = new Promise((resolve, reject) =>{ // resolve(new Promise((a, b) =>{a(100)})) // }) // promise.then((data)=>{ // console.log(data); // // data.then((res)=>{ // // console.log(res) // // }) // }) ~~~ >[info] ## 更多實現 >[danger] ##### 簡易版 ~~~ // 構造函數 function Promise(executor) { var self = this; if (typeof executor !== 'function') throw new TypeError('Promise resolver ' + executor + ' is not a function'); if (!(self instanceof Promise)) throw new TypeError('undefined is not a promise'); // 私有屬性：狀態 & 值 self.state = 'pending'; self.value = undefined; self.onfulfilledCallbacks = []; self.onrejectedCallbacks = []; // 用來修改實例的狀態和值「立即」 & 把之前基于then存儲的onfulfilled/onrejected方法執行「異步」 var change = function change(state, value) { if (self.state !== 'pending') return; self.state = state; self.value = value; setTimeout(function () { var callbacks = self.state === "fulfilled" ? self.onfulfilledCallbacks : self.onrejectedCallbacks; for (var i = 0; i < callbacks.length; i++) { var callback = callbacks[i]; if (typeof callback === 'function') callback(self.value); } }); }; // 控制如何修改狀態 try { executor(function resolve(value) { change('fulfilled', value); }, function reject(reason) { change('rejected', reason); }); } catch (err) { change('rejected', err.message); } } // 向原型上擴展方法:供其實例調用的 Promise.prototype = { constructor: Promise, then: function then(onfulfilled, onrejected) { // 第一類：.then的時候已經知道了實例的狀態，此時我們創建一個”異步微任務”，執行對應的onfulfilled/onrejected // 第二類：.then的時候還不知道實例的狀態呢，此時我們onfulfilled/onrejected先存儲起來，后期狀態修改后，通知對應的方法執行，只不過此時也是一個”異步微任務” // 在不使用queueMicrotask這個方法的時候，我們無法創建異步微任務，所以我們可以拿定時器模擬一個異步宏任務來代替微任務 var self = this; switch (self.state) { case 'fulfilled': setTimeout(function () { onfulfilled(self.value); }); break; case 'rejected': setTimeout(function () { onrejected(self.value); }); break; default: self.onfulfilledCallbacks.push(onfulfilled); self.onrejectedCallbacks.push(onrejected); } }, catch: function my_catch() {} }; if (typeof Symbol !== "undefined") Promise.prototype[Symbol.toStringTag] = 'Promise'; // 當做對象擴展的靜態私有方法:工具類方法 Promise.resolve = function resolve(value) { return new Promise(function (resolve) { resolve(value); }); }; Promise.reject = function reject(reason) { return new Promise(function (_, reject) { reject(reason); }); }; Promise.all = function all() {}; ~~~ >[danger] ##### 完整版 ~~~ (function () { // 構造函數 function Promise(executor) { var self = this; if (typeof executor !== 'function') throw new TypeError('Promise resolver ' + executor + ' is not a function'); if (!(self instanceof Promise)) throw new TypeError('undefined is not a promise'); self.state = 'pending'; self.value = undefined; self.onfulfilledCallbacks = []; self.onrejectedCallbacks = []; var change = function change(state, value) { if (self.state !== 'pending') return; self.state = state; self.value = value; setTimeout(function () { var callbacks = self.state === "fulfilled" ? self.onfulfilledCallbacks : self.onrejectedCallbacks; for (var i = 0; i < callbacks.length; i++) { var callback = callbacks[i]; if (typeof callback === 'function') callback(self.value); } }); }; try { executor(function resolve(value) { change('fulfilled', value); }, function reject(reason) { change('rejected', reason); }); } catch (err) { change('rejected', err.message); } } // 向原型上擴展方法:供其實例調用的 var resolvePromise = function resolvePromise(promise, x, resolve, reject) { if (x === promise) throw new TypeError('Chaining cycle detected for promise #<Promise>'); if (x !== null && /^(object|function)$/i.test(typeof x)) { var then; try { then = x.then; } catch (err) { reject(err); } if (typeof then === 'function') { // 說明返回值x是一個promie實例 var called = false; try { then.call(x, function onfulfilled(y) { if (called) return; called = true; resolvePromise(promise, y, resolve, reject); }, function onrejected(r) { if (called) return; called = true; reject(r); }); } catch (err) { if (called) return; reject(err); } return; } } resolve(x); }; var handle = function handle(callback, value, promise, resolve, reject) { try { var x = callback(value); resolvePromise(promise, x, resolve, reject); } catch (err) { reject(err); } }; Promise.prototype = { constructor: Promise, then: function then(onfulfilled, onrejected) { var self = this, promise = null; if (typeof onfulfilled !== 'function') { onfulfilled = function onfulfilled(value) { return value; }; } if (typeof onrejected !== 'function') { onrejected = function onrejected(reason) { throw reason; }; } promise = new Promise(function (resolve, reject) { switch (self.state) { case 'fulfilled': setTimeout(function () { handle(onfulfilled, self.value, promise, resolve, reject); }); break; case 'rejected': setTimeout(function () { handle(onrejected, self.value, promise, resolve, reject); }); break; default: self.onfulfilledCallbacks.push(function (value) { handle(onfulfilled, value, promise, resolve, reject); }); self.onrejectedCallbacks.push(function (reason) { handle(onrejected, reason, promise, resolve, reject); }); } }); return promise; }, catch: function my_catch(onrejected) { return this.then(null, onrejected); } }; if (typeof Symbol !== "undefined") Promise.prototype[Symbol.toStringTag] = 'Promise'; // 當做對象擴展的靜態私有方法:工具類方法 Promise.resolve = function resolve(value) { return new Promise(function (resolve) { resolve(value); }); }; Promise.reject = function reject(reason) { return new Promise(function (_, reject) { reject(reason); }); }; // 驗證x是否為一個符合規范的promise實例 var isPromise = function isPromise(x) { if (x !== null && /^(object|function)$/i.test(typeof x)) { if (typeof x.then === 'function') { return true; } } return false; }; Promise.all = function all(promises) { if (!Array.isArray(promises)) throw new TypeError('promises must be an Array'); var n = 0, results = []; return new Promise(function (resolve, reject) { for (var i = 0; i < promises.length; i++) { (function (i) { var promise = promises[i]; if (!isPromise(promise)) promise = Promise.resolve(promise); promise.then(function onfulfilled(value) { n++; results[i] = value; if (n >= promises.length) resolve(results); }).catch(function onrejected(reason) { reject(reason); }); })(i); } }); }; // 測試規范性:promises-aplus-tests Promise.deferred = function deferred() { var result = {}; result.promise = new Promise(function (resolve, reject) { result.resolve = resolve; result.reject = reject; }); return result; }; /* 暴露API */ if (typeof window !== 'undefined') window.Promise = Promise; if (typeof module === 'object' && typeof module.exports === 'object') module.exports = Promise; })(); ~~~