[[343707]]

一、Promise/A+ 規(guī)范
① Promise 是一個(gè)類或者函數(shù)，內(nèi)部擁有3個(gè)狀態(tài)，分別為pending(等待)、fulfilled(執(zhí)行、完成)、rejected(拒絕、未完成)。

默認(rèn)為pending狀態(tài)，即Promise對象剛創(chuàng)建的時(shí)候狀態(tài)為pending，并且pending狀態(tài)可以轉(zhuǎn)換fulfilled或者rejected。

fulfilled和rejected為最終的狀態(tài)，一旦變?yōu)閒ulfilled或者rejected，那么將無法轉(zhuǎn)變?yōu)槠渌麪顟B(tài)。

② Promise需要對外提供一個(gè)then方法。

promise.then(onFulfilled, onRejected) 

如果可選參數(shù)onFulfilled和onRejected不為函數(shù)時(shí)應(yīng)該被忽略；

onFulfilled和onRejected函數(shù)都應(yīng)該是異步執(zhí)行的；

當(dāng)調(diào)用 onFulfilled 函數(shù)時(shí)，會(huì)將當(dāng)前 Promise 的值作為參數(shù)傳入，并且只能調(diào)用一次；

當(dāng)調(diào)用 onRejected 函數(shù)時(shí)，會(huì)將當(dāng)前 Promise 的失敗原因作為參數(shù)傳入，并且只能調(diào)用一次；

then函數(shù)的返回值仍然為Promise，以便進(jìn)行鏈?zhǔn)秸{(diào)用；

③ resolvePromisethen方法會(huì)創(chuàng)建并返回一個(gè)Promise對象，then中注冊的回調(diào)函數(shù)會(huì)返回各種值，必須進(jìn)行校驗(yàn)。

then方法返回的promise不能與then中回調(diào)函數(shù)返回值x相等，否則需要拋出錯(cuò)誤；

如果是then回調(diào)函數(shù)返回值為一個(gè)非Promise對象，則直接用then返回的promise對象的resolve方法，resolve(x)即可。

如果then回調(diào)函數(shù)返回值x為一個(gè)Promise對象或者一個(gè)帶then方法的對象或函數(shù)，那么需要執(zhí)行其then方法注冊回調(diào)，拿到Promise或類Promise對象的值作為then返回的promise的值，如果值仍然為Promise對象則需要進(jìn)行遞歸操作；

二、實(shí)現(xiàn)Promise
① 根據(jù)第一條規(guī)范，Promise是一個(gè)類或者函數(shù)，所以我們先將Promise定義成一個(gè)類，同時(shí)內(nèi)部有三個(gè)狀態(tài)，我們將其定義為常量。

var PENDING = "pending"; // 等待狀態(tài) 
var FULFILLED = "fulfilled"; // 執(zhí)行、完成狀態(tài) 
var REJECTED = "rejected"; // 拒絕、未完成狀態(tài) 
class Promise { 
    constructor() { 
        this.state = PENDING; // Promise對象創(chuàng)建完成后默認(rèn)為等待狀態(tài) 
    } 
} 

② 我們在創(chuàng)建Promise的時(shí)候會(huì)傳入一個(gè)函數(shù)，該函數(shù)會(huì)在創(chuàng)建Promise對象的時(shí)候立即執(zhí)行，并且會(huì)接收兩個(gè)參數(shù)，分別用于執(zhí)行或拒絕當(dāng)前Promise對象，即修改當(dāng)前Promise對象的狀態(tài)。Promise是用于處理異步的，所以在Promise狀態(tài)變?yōu)橥瓿傻臅r(shí)候可能會(huì)接收到異步操作執(zhí)行的結(jié)果，在Promise狀態(tài)變?yōu)槲赐瓿傻臅r(shí)候可能會(huì)接收到失敗的原因，所以Promise內(nèi)部還需要保存異步操作的結(jié)果value、失敗的原因reason。

...... 
class Promise { 
    constructor(executor) { // 傳入執(zhí)行器函數(shù) 
        ...... 
        this.value = undefined; // 保存異步操作的結(jié)果 
        this.reason = undefined; // 保存失敗的原因 
        const resolve = (value) => { 
            this.value = value; 
            this.state = FULFILLED; // 將Promise對象的狀態(tài)改為完成狀態(tài) 
        } 
        const reject = (reason) => { 
            this.reason = reason; 
            this.state = REJECTED; // 將Promise對象的狀態(tài)改為未完成狀態(tài) 
        } 
        try { 
            executor(resolve, reject); // 執(zhí)行器由用戶傳入可能會(huì)發(fā)生錯(cuò)誤，所以需要進(jìn)行捕獲 
        } catch(e) { 
            reject(e); 
        } 
    } 
} 

③ 這里還存在一個(gè)問題，就是Promise必須是單次執(zhí)行的，Promise的狀態(tài)一旦從pending狀態(tài)修改為fulfilled或者rejected，就不能再發(fā)生變化，從fulfilled變?yōu)閒ulfilled也不可以，也就是說resolve或者reject只能執(zhí)行一次。所以我們需要對resolve和reject內(nèi)部進(jìn)行判斷，如果狀態(tài)已經(jīng)變化了則不再執(zhí)行了，如:

...... 
class Promise { 
    constructor(executor) { // 傳入執(zhí)行器函數(shù) 
        ...... 
        const resolve = (value) => { 
            if (this.state === PENDING) { // 防止用戶多次resolve，以第一次resolve為準(zhǔn) 
                ...... 
            } 
        } 
        const reject = (reason) => { 
            if (this.state === PENDING) { // 防止用戶多次reject 
                ...... 
            } 
        } 
        ...... 
    } 
} 

④ 給Promise添加一個(gè)then函數(shù)，then函數(shù)接收onFulfilled, onRejected兩個(gè)函數(shù)作為參數(shù)，分別用于處理Promise完成時(shí)和未完成時(shí)的回調(diào)函數(shù)，如果不是函數(shù)，則要進(jìn)行初始化為一個(gè)函數(shù)，如:

class Promise { 
    then(onFulfilled, onRejected) { 
        onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (value) => { // 如果onFulfilled不是函數(shù)，則初始化一個(gè)完成處理函數(shù) 
            return value; 
        }; 
        onRejected = typeof onRejected === "function" ? onRejected : (reason) => { // 如果onRejected不是函數(shù)，則初始化一個(gè)未完成處理函數(shù) 
            throw reason; // 傳什么就拋出什么 
        } 
    } 
} 

⑤ then方法其實(shí)就是一個(gè)注冊回調(diào)的過程，當(dāng)調(diào)用then的這個(gè)Promise對象的狀態(tài)變?yōu)橥瓿蔂顟B(tài)就可以執(zhí)行onFulfilled回調(diào)函數(shù)，當(dāng)Promise對象的狀態(tài)變?yōu)榫芙^狀態(tài)就可以執(zhí)行onRejected回調(diào)函數(shù)了。所以回調(diào)函數(shù)的執(zhí)行依賴于調(diào)用then的Promise的狀態(tài)。同時(shí)為了支持鏈?zhǔn)秸{(diào)用，then方法還需要返回一個(gè)Promise對象。根據(jù)前面的Promise規(guī)范，傳入的回調(diào)函數(shù)必須異步執(zhí)行，這里用setTimeout進(jìn)行模擬。

class Promise { 
    then(onFulfilled, onRejected) { 
        ...... 
        let promise; 
        switch(this.state) { 
            case FULFILLED: // 調(diào)用then方法的時(shí)候，當(dāng)前Promise狀態(tài)已經(jīng)變成完成狀態(tài)，則可用立即執(zhí)行完成的回調(diào)函數(shù) 
                promise = new Promise((resolve, reject) => { 
                    setTimeout(() => { 
                        try { 
                            let x = onFulfilled(this.value); 
                        } catch(e) { 
                            console.log(e); // 打印錯(cuò)誤信息 
                            reject(e); 
                        } 
                    }); 
                }); 
                break; 
            case REJECTED: 
                promise = new Promise((resolve, reject) => { 
                    setTimeout(() => { 
                        try { 
                            let x = onRejected(this.reason); 
                        } catch(e) { 
                            reject(e); 
                        } 
                    }); 
                } 
                break; 
            case PENDING: 
                promise = new Promise((resolve, reject) => { 
                    // TODO 
                }); 
                break; 
        } 
        return promise; 
    } 
} 

⑥ 當(dāng)調(diào)用then的Promise對象處于pending狀態(tài)的時(shí)候，此時(shí)通過then注冊的回調(diào)函數(shù)不能立即執(zhí)行，必須等待Promise的狀態(tài)變?yōu)樽罱K狀態(tài)才能執(zhí)行注冊的回調(diào)函數(shù)。這里就涉及到了一個(gè)發(fā)布訂閱模式。我們可以先將回調(diào)函數(shù)保存起來，那么什么時(shí)候Promise才會(huì)變成最終狀態(tài)呢？那就是調(diào)用resolve或reject的時(shí)候，所以我們可以在調(diào)用resolve或reject的時(shí)候，取出注冊的回調(diào)函數(shù)然后執(zhí)行即可。

class Promise { 
    constructor(executor) { 
        const resolve = (value) => { 
            if (this.state === PENDING) { // 防止用戶多次resolve，以第一次resolve為準(zhǔn) 
                ...... 
                this.onFulfilleds.forEach(fn => fn()); // 取出then中注冊的完成回調(diào)函數(shù)并執(zhí)行 
            } 
        }; 
        const reject = (reason) => { 
            if (this.state === PENDING) { // 防止用戶多次reject 
                ...... 
                this.onRejecteds.forEach(fn => fn()); // 取出then中注冊的拒絕回調(diào)函數(shù)并執(zhí)行 
            } 
        }; 
    } 
    then(onFulfilled, onRejected) { 
        ...... 
        switch(this.state) { 
            case PENDING: 
                promise = new Promise((resolve, reject) => { 
                    this.onFulfilleds.push(() => { 
                        try { 
                            let x = onFulfilled(this.value); 
                        } catch(e) { 
                            console.log(e); // 打印錯(cuò)誤信息 
                            reject(e); 
                        } 
                    }); 
                    this.onRejecteds.push(() => { 
                        try { 
                            let x = onRejected(this.reason); 
                        } catch(e) { 
                            reject(e); 
                        } 
                    }); 
                }); 
                break; 
        } 
    } 
} 

⑦ 接下來就是要處理then注冊的回調(diào)函數(shù)的返回值了，因?yàn)榛卣{(diào)函數(shù)的返回值可能是各種各樣的情況，可能是普通的值，可能是Promise對象，也可能是帶then方法的對象，所以我們要一一進(jìn)行處理。這里我們使用一個(gè)單獨(dú)的方法resolvePromise()進(jìn)行各種情況的處理，如:

// 傳入then()方法中創(chuàng)建的Promise對象，回調(diào)函數(shù)的返回值x，then()方法中創(chuàng)建的Promise的resolve、reject 
const resolvePromise = function(promise, x, resolve, reject) { 
    // TODO 
} 
class Promise { 
    constructor(executor) { // 傳入執(zhí)行器函數(shù) 
        ...... 
    } 
    then(onFulfilled, onRejected) { 
        case FULFILLED: 
            promise = new Promise((resolve, reject) => { 
                ...... 
                let x = onFulfilled(this.value); 
                resolvePromise(promise, x, resolve, reject); // 處理回調(diào)函數(shù)的返回值 
            }); 
        case REJECTED: 
            promise = new Promise((resolve, reject) => { 
                ...... 
                let x = onRejected(this.reason); 
                resolvePromise(promise, x, resolve, reject); // 處理回調(diào)函數(shù)的返回值 
            }); 
        case PENDING: 
            this.onFulfilleds.push(() => { 
                let x = onFulfilled(this.value); 
                resolvePromise(promise, x, resolve, reject); // 處理回調(diào)函數(shù)的返回值 
            }); 
            this.onRejecteds.push(() => { 
                let x = onRejected(this.reason); 
                resolvePromise(promise, x, resolve, reject); // 處理回調(diào)函數(shù)的返回值 
            }); 
    } 
} 

三、實(shí)現(xiàn)resolvePromise
① 如果回調(diào)函數(shù)返回值與then()方法中創(chuàng)建的Promise對象相同則拋出錯(cuò)誤，這相當(dāng)于是自己等自己會(huì)進(jìn)入死循環(huán)。

let p1 = new Promise((resolve, reject) => { 
    resolve(1); 
}) 
let p2 = p1.then((value) => { // p2即then方法內(nèi)創(chuàng)建Promise對象 
    return p2; 
}); 
// 結(jié)果拋出錯(cuò)誤，顯示Chaining cycle detected for promise #<Promise> 

const resolvePromise = function(promise, x, resolve, reject) { 
    if (promise === x) { // 禁止resolve自己 
        throw new Error("Chaining cycle detected for promise #<Promise>"); 
    } 
} 

② 如果回調(diào)函數(shù)返回的是一個(gè)Promise對象或者帶then方法的類Promise對象，又或者一個(gè)函數(shù)，因?yàn)楹瘮?shù)上也可能有then方法，那么我們需要取出then方法并執(zhí)行，對于Promise對象而言，then方法的執(zhí)行就會(huì)注冊相應(yīng)的回調(diào)函數(shù)，等Promise狀態(tài)變?yōu)樽罱K狀態(tài)后就會(huì)執(zhí)行對應(yīng)的回調(diào)函數(shù)，回調(diào)函數(shù)執(zhí)行后就可以拿到Promise對象的value值，然后將該value值作為調(diào)用then方法創(chuàng)建的Promise的對象的value值。

const resolvePromise = function(promise, x, resolve, reject) { 
    ...... 
    if ((x && typeof x === "object") || typeof x === "function") { // 如果是對象或者函數(shù)，函數(shù)也可能有then方法 
        let executed; 
        try { 
            let then = x.then; // 嘗試取出then方法 
            if (typeof then === "function") { // 如果該對象上存在then方法，那么是個(gè)Promise對象或者包含then方法的對象 
                then.call(x, function (y) { // 執(zhí)行then方法，對于真正的Promise對象，則會(huì)注冊回調(diào)，等到狀態(tài)變化后，回調(diào)函數(shù)會(huì)執(zhí)行，回調(diào)中能接收到Promise的value值 
                    if (executed) return; 
                    executed = true; // 注冊的回調(diào)函數(shù)只能執(zhí)行一次 
                    resolvePromise(promise, y, resolve, reject); // 返回值還可能是一個(gè)Promise對象，故需要遞歸直到變?yōu)槠胀ㄖ禐橹?nbsp;
                }, function (e) { 
                    if (executed) return; 
                    executed = true; 
                    reject(e); 
                }); 
            } else { // 不包含then方法的普通對象，直接resolve即可 
                resolve(x);       
            } 
        } catch(e) { 
            if (executed) return; 
            executed = true; 
            reject(e); 
        } 
    } else { 
        resolve(x); 
    } 
} 

四、實(shí)現(xiàn)catch
catch可以看做是一個(gè)特殊的then方法，其內(nèi)部會(huì)調(diào)用then()方法，但是僅注冊拒絕的回調(diào)函數(shù)，這也就是then(onFulfilled, onRejected)和then(onFulfilled).catch(onRejected)的區(qū)別，如果將onRejected寫到then中，那么當(dāng)then的onFulfilled發(fā)生錯(cuò)誤的時(shí)候，onRejected就無法捕獲到其中的錯(cuò)誤，而寫到catch中，那么就相當(dāng)于是下一個(gè)then()方法，故能捕獲到上一個(gè)then()方法中發(fā)生的錯(cuò)誤。

class Promise { 
    catch(onRejected) { 
        return this.then(null, onRejected); // 僅注冊拒絕的回調(diào)函數(shù) 
    } 
} 

五、總結(jié)
Promise其實(shí)就是一個(gè)類，內(nèi)部有state、value、reason等屬性，分別用于存儲(chǔ)當(dāng)前Promise的狀態(tài)、執(zhí)行成功后的返回值，執(zhí)行失敗的原因，同時(shí)內(nèi)部還提供了resolve、reject兩個(gè)方法，這兩個(gè)方法會(huì)以參數(shù)的形式傳遞給執(zhí)行器，即傳遞到外部，以便修改Promise的狀態(tài)。

Promise還提供了一個(gè)then方法用于注冊回調(diào)函數(shù)，注冊回調(diào)的時(shí)候與當(dāng)前Promise的狀態(tài)有關(guān)，如果是最終狀態(tài)，則立即執(zhí)行，如果是等待狀態(tài)，則先保存起來，等到調(diào)用resolve或reject方法的時(shí)候再取出回調(diào)并執(zhí)行。注冊的回調(diào)函數(shù)可能會(huì)返回各種各樣的值:

如果返回的是普通值，那么直接用then返回的Promise的resolve方法resolve即可；

如果返回的是Promise對象或者是帶then方法的對象或函數(shù)，那么需要調(diào)用其then方法并注冊一個(gè)自定義回調(diào)用于接收當(dāng)前Promise的值，等該P(yáng)romise變?yōu)樽罱K狀態(tài)后會(huì)執(zhí)行回調(diào)就可以拿到其value，最后將其作為then返回的Promise的value，即resolve(x)。完整源碼如下:

var PENDING = "pending"; // 等待狀態(tài) 
var FULFILLED = "fulfilled"; // 執(zhí)行、完成狀態(tài) 
var REJECTED = "rejected"; // 拒絕、未完成狀態(tài) 
// 傳入then()方法中創(chuàng)建的Promise對象，回調(diào)函數(shù)的返回值x，then()方法中創(chuàng)建的Promise的resolve、reject 
const resolvePromise = function(promise, x, resolve, reject) { 
    if (promise === x) { // 禁止resolve自己 
        throw new Error("Chaining cycle detected for promise #<Promise>"); 
    } 
    if ((x && typeof x === "object") || typeof x === "function") { // 如果是對象或者函數(shù)，函數(shù)也可能有then方法 
        let executed; 
        try { 
            let then = x.then; // 嘗試取出then方法 
            if (typeof then === "function") { // 如果該對象上存在then方法，那么是個(gè)Promise對象或者包含then方法的對象 
                then.call(x, function (y) { // 執(zhí)行then方法，對于真正的Promise對象，則會(huì)注冊回調(diào)，等到狀態(tài)變化后，回調(diào)函數(shù)會(huì)執(zhí)行，回調(diào)中能接收到Promise的value值 
                    if (executed) return; 
                    executed = true; // 注冊的回調(diào)函數(shù)只能執(zhí)行一次 
                    resolvePromise(promise, y, resolve, reject); // 返回值還可能是一個(gè)Promise對象，故需要遞歸直到變?yōu)槠胀ㄖ禐橹?nbsp;
                }, function (e) { 
                    if (executed) return; 
                    executed = true; 
                    reject(e); 
                }); 
            } else { // 不包含then方法的普通對象，直接resolve即可 
                resolve(x); 
            } 
        } catch(e) { 
            if (executed) return; 
            executed = true; 
            reject(e); 
        } 
    } else { 
        resolve(x); 
    } 
} 
class Promise { 
    constructor(executor) { // 傳入執(zhí)行器函數(shù) 
        this.state = PENDING; // Promise對象創(chuàng)建完成后默認(rèn)為等待狀態(tài) 
        this.value = undefined; // 保存異步操作的結(jié)果 
        this.reason = undefined; // 保存失敗的原因 
        this.onFulfilleds = []; // 保存then中注冊的完成回調(diào)函數(shù) 
        this.onRejecteds = []; // 保存then中注冊的拒絕回調(diào)函數(shù) 
        const resolve = (value) => { 
            if (this.state === PENDING) { // 防止用戶多次resolve，以第一次resolve為準(zhǔn) 
                this.value = value; 
                this.state = FULFILLED; // 將Promise對象的狀態(tài)改為完成狀態(tài) 
                this.onFulfilleds.forEach(fn => fn()); // 取出then中注冊的完成回調(diào)函數(shù)并執(zhí)行 
            } 
        }; 
        const reject = (reason) => { 
            if (this.state === PENDING) { // 防止用戶多次reject 
                this.reason = reason; 
                this.state = REJECTED; // 將Promise對象的狀態(tài)改為未完成狀態(tài) 
                this.onRejecteds.forEach(fn => fn()); // 取出then中注冊的拒絕回調(diào)函數(shù)并執(zhí)行 
            } 
        }; 
        try { 
            executor(resolve, reject); // 執(zhí)行器由用戶傳入可能會(huì)發(fā)生錯(cuò)誤，所以需要進(jìn)行捕獲 
        } catch(e) { 
            reject(e); 
        } 
    } 
    then(onFulfilled, onRejected) { 
        onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (value) => { // 如果onFulfilled不是函數(shù)，則初始化一個(gè)完成處理函數(shù) 
            return value; 
        }; 
        onRejected = typeof onRejected === "function" ? onRejected : (reason) => { // 如果onRejected不是函數(shù)，則初始化一個(gè)未完成處理函數(shù) 
            throw reason; // 傳什么就拋出什么 
        } 
        let promise; 
        switch(this.state) { 
            case FULFILLED: // 調(diào)用then方法的時(shí)候，當(dāng)前Promise狀態(tài)已經(jīng)變成完成狀態(tài)，則可用立即執(zhí)行完成的回調(diào)函數(shù) 
                promise = new Promise((resolve, reject) => { 
                    setTimeout(() => { 
                        try { 
                            let x = onFulfilled(this.value); 
                            resolvePromise(promise, x, resolve, reject); 
                        } catch(e) { 
                            console.log(e); 
                            reject(e); 
                        } 
                    }); 
                }); 
                break; 
             case REJECTED: 
                promise = new Promise((resolve, reject) => { 
                    setTimeout(() => { 
                        try { 
                            let x = onRejected(this.reason); 
                            resolvePromise(promise, x, resolve, reject); 
                        } catch(e) { 
                            reject(e); 
                        } 
                    }); 
                }); 
                break; 
            case PENDING: 
                promise = new Promise((resolve, reject) => { 
                    this.onFulfilleds.push(() => { 
                        try { 
                            let x = onFulfilled(this.value); 
                            resolvePromise(promise, x, resolve, reject); 
                        } catch(e) { 
                            reject(e); 
                        } 
                    }); 
                    this.onRejecteds.push(() => { 
                        try { 
                            let x = onRejected(this.reason); 
                            resolvePromise(promise, x, resolve, reject); 
                        } catch(e) { 
                            reject(e); 
                        } 
                    }); 
                }); 
                break; 
            } 
        return promise; 
    } 
    catch(onRejected) { 
        return this.then(null, onRejected); // 僅注冊拒絕的回調(diào)函數(shù) 
    } 
}