promise 實現(xiàn)（es6 完整源碼）

solocoder 發(fā)布于2019-08-23 16:45 / 1817人閱讀

摘要：當(dāng)?shù)臓顟B(tài)已經(jīng)流轉(zhuǎn)時，回調(diào)函數(shù)會立即被執(zhí)行，當(dāng)還處于狀態(tài)時，回調(diào)函數(shù)被推入相應(yīng)隊列中等待執(zhí)行。

概覽

const PENDING = Symbol("PENDING");
const FULFILLED = Symbol("FULFILLED");
const REJECTED = Symbol("REJECTED");

class MyPromise {
    constructor(fn) {}
    then(successFn, failFn) {}
    catch(failFn) {}
    finally(finalFn){}
    static resolve(val) {}
    static reject(val) {}
    static all(promiseArr) {}
    static race(promiseArr) {}
}

Promise 內(nèi)部維護著三種狀態(tài) pending、fulfilled 和 rejected，狀態(tài)只能從 pending 轉(zhuǎn)變到 fulfilled，或從 pending 轉(zhuǎn)變到 rejected 且該轉(zhuǎn)變不可逆。

Promise 主要提供了三個實例方法 then，catch，finally，和4個靜態(tài)方法 resolve，reject，all，race。所有方法都都返回一個Promise對象。

構(gòu)造函數(shù)

    constructor(fn) {
        this.fulfilledQueue = [];
        this.rejectedQueue = [];
        this._status = PENDING;
        this._value  = null;

        // 執(zhí)行成功隊列中的回調(diào)函數(shù)
        const handleFulfilledQueue = () => {
            while(this.fulfilledQueue.length) {
                let fulfiledFn = this.fulfilledQueue.shift();
                fulfiledFn(this._value);
            };
        };
        
        // 執(zhí)行失敗隊列中的回調(diào)函數(shù)
        const handleRejectedQueue = () => {
            while(this.rejectedQueue.length) {
                let rejectedFn = this.rejectedQueue.shift();
                rejectedFn(this._value);
            };
        };

        // 完成狀態(tài)轉(zhuǎn)變，執(zhí)行回調(diào)隊列中的回調(diào)函數(shù)
        const _resolve = (val) => {
            const fn = () => {
                if(this._status !== PENDING) {
                    return;
                }
                if(val instanceof MyPromise) {
                    val.then((res) => {
                        this._status = FULFILLED;
                        this._value = res;
                        handleFulfilledQueue();
                    }, (err) => {
                        this._status = REJECTED;
                        this._value = err;
                        handleRejectedQueue();
                    });
                } else {
                    this._status = FULFILLED;
                    this._value = val;
                    handleFulfilledQueue();
                }
            }
            // 保證promise 回調(diào)函數(shù)一定是在同步任務(wù)之后執(zhí)行；
            setTimeout(fn, 0);
        }
        // 完成狀態(tài)Pending到REJECTED的轉(zhuǎn)變，執(zhí)行rejected隊列中的回調(diào)函數(shù)
        const _reject = (val) => {
            const fn = () => {
                if(this._status !== PENDING) {
                    return;
                }
                this._status = REJECTED;
                this._value = val;
                handleRejectedQueue();
            }
            setTimeout(fn, 0);
        }
        
        try {  // 處理外部傳入函數(shù)執(zhí)行異常
            fn(_resolve, _reject);            
        } catch(e) {
            return _reject(e);
        }
    }

Promise 構(gòu)造函數(shù)接收一個函數(shù)執(zhí)行器作為參數(shù)，該執(zhí)行器的兩個參數(shù) _resolve、_reject均為函數(shù)類型，由 Promise 內(nèi)部實現(xiàn)。執(zhí)行器在 Promise 構(gòu)造函數(shù)中被立即執(zhí)行。

注意： MyPromise 使用 Timeout 實現(xiàn)異步，使得 MyPromise 只能添加 macrotask，實際上原生的Promise 是 microtask

then 方法

    then(successFn, failFn) {
        return new MyPromise((resolve, reject) => {
            // 執(zhí)行成功時的回調(diào)函數(shù)
            const handleSucess = (fn) => {
                try {
                    if(typeof fn === "function") {
                        const res = fn(this._value);
                        if(res instanceof MyPromise) {
                            res.then(resolve, reject);
                        } else {
                            resolve(res);
                        }
                    } else {
                        resolve(this._value)
                    }
                } catch(e){
                    reject(e);
                }
            }
            // 執(zhí)行失敗時的回調(diào)函數(shù)
            const handleFail = (fn) => {
                try {
                    if(typeof fn === "function") {
                        const res = fn(this._value);
                        if(res instanceof MyPromise) {
                            res.then(resolve, reject);
                        } else {
                            resolve(res);
                        }
                    } else {
                        reject(this._value);
                    }
                } catch(e) {
                    reject(e);
                }
            }
            switch(this._status){
                case PENDING:       // 異步任務(wù)尚未完成，將回調(diào)函數(shù)推入相應(yīng)隊列
                    this.fulfilledQueue.push(() => {
                        handleSucess(successFn);
                    });
                    this.rejectedQueue.push(() => {
                        handleFail(failFn);
                    });
                    break;
                case FULFILLED:     // 異步任務(wù)成功完成，執(zhí)行成功回調(diào)函數(shù)
                    handleSucess(successFn);
                    break;
                case REJECTED:      // 異步任務(wù)已失敗，執(zhí)行失敗回調(diào)函數(shù)
                    handleFail(failFn);
                    break;
                default:
                    console.log("Promise error status:", this._status);
                    break;
            };
        });
    }

then 方法是 Promise 的一個主要方法，catch 和 finally 都可以用 then 來實現(xiàn)。當(dāng) Promise 的狀態(tài)已經(jīng)流轉(zhuǎn)時，回調(diào)函數(shù)會立即被執(zhí)行，當(dāng) Promise 還處于 Pending 狀態(tài)時，回調(diào)函數(shù)被推入相應(yīng)隊列中等待執(zhí)行。

完整代碼

class MyPromise {
    constructor(fn) {
        this.fulfilledQueue = [];
        this.rejectedQueue = [];
        this._status = PENDING;
        this._value  = null;

        const handleFulfilledQueue = () => {
            while(this.fulfilledQueue.length) {
                let fulfiledFn = this.fulfilledQueue.shift();
                fulfiledFn(this._value);
            };
        };
        const handleRejectedQueue = () => {
            console.log(this.rejectedQueue);
            while(this.rejectedQueue.length) {
                let rejectedFn = this.rejectedQueue.shift();
                rejectedFn(this._value);
            };
        };

        // 完成狀態(tài)轉(zhuǎn)變，執(zhí)行回調(diào)隊列中的回調(diào)函數(shù)
        const _resolve = (val) => {
            const fn = () => {
                if(this._status !== PENDING) {
                    return;
                }
                if(val instanceof MyPromise) {
                    val.then((res) => {
                        this._status = FULFILLED;
                        this._value = res;
                        handleFulfilledQueue();
                    }, (err) => {
                        this._status = REJECTED;
                        this._value = err;
                        handleRejectedQueue();
                    });
                } else {
                    this._status = FULFILLED;
                    this._value = val;
                    handleFulfilledQueue();
                }
            }
            setTimeout(fn, 0);
        }
        // 完成狀態(tài)Pending到REJECTED的轉(zhuǎn)變，執(zhí)行rejected隊列中的回調(diào)函數(shù)
        const _reject = (val) => {
            const fn = () => {
                if(this._status !== PENDING) {
                    return;
                }
                this._status = REJECTED;
                this._value = val;
                handleRejectedQueue();
            }
            setTimeout(fn, 0);
        }
        
        try { // 處理外部傳入函數(shù)執(zhí)行異常
            fn(_resolve, _reject);            
        } catch(e) {
            
            return _reject(e);
        }
    }

    then(successFn, failFn) {
        return new MyPromise((resolve, reject) => {
            // 執(zhí)行成功時的回調(diào)函數(shù)
            const handleSucess = (fn) => {
                try {
                    if(typeof fn === "function") {
                        const res = fn(this._value);
                        if(res instanceof MyPromise) {
                            res.then(resolve, reject);
                        } else {
                            resolve(res);
                        }
                    } else {
                        resolve(this._value)
                    }
                } catch(e){
                    reject(e);
                }
            }
            // 執(zhí)行失敗時的回調(diào)函數(shù)
            const handleFail = (fn) => {
                try {
                    if(typeof fn === "function") {
                        const res = fn(this._value);
                        if(res instanceof MyPromise) {
                            res.then(resolve, reject);
                        } else {
                            resolve(res);
                        }
                    } else {
                        reject(this._value);
                    }
                } catch(e) {
                    reject(e);
                }
            }
            switch(this._status){
                case PENDING:       // 異步任務(wù)尚未完成，將回調(diào)函數(shù)推入相應(yīng)隊列
                    this.fulfilledQueue.push(() => {
                        handleSucess(successFn);
                    });
                    this.rejectedQueue.push(() => {
                        handleFail(failFn);
                    });
                    break;
                case FULFILLED:     // 異步任務(wù)成功完成，執(zhí)行成功回調(diào)函數(shù)
                    handleSucess(successFn);
                    break;
                case REJECTED:      // 異步任務(wù)已失敗，執(zhí)行失敗回調(diào)函數(shù)
                    handleFail(failFn);
                    break;
                default:
                    console.log("Promise error status:", this._status);
                    break;
            };
        });
    }

    catch(failFn) {
        return this.then(null, failFn);
    }

    finally(finalFn){
        return this.then(finalFn, finalFn);
    }

    static resolve(val) {
        if(val instanceof MyPromise) {
            return val;
        } else {
            return new MyPromise((resolve, reject) =>{
                resolve(val);
            });
        }
    }

    static reject(val) {
        return new MyPromise((resolve, reject) => {     
            reject(val);
        });
    }

    static all(promiseArr) {
        return new Promise((resolve, reject) =>{
            const len = promiseArr.length;
            let count = 0;
            let result = [];
            for(let i = 0; i < len; i++) {
                promiseArr[i].then((val) => {
                    count++;
                    result.push[val];
                    if(count === len){
                        resolve(result);
                    }
                }, (err) => {
                    reject(err);
                });
            }
        });
    }

    static race(promiseArr) {
        return new Promise((resolve, reject) =>{
            const len = promiseArr.length;
            for(let i = 0; i < len; i++) {
                promiseArr[i].then((val) => {
                    resolve(val);
                }, (err) => {
                    reject(err);
                });
            }
        });
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103251.html

發(fā)表評論

登陸后可評論

0條評論

solocoder

男|高級講師

我要關(guān)注我要私信

TA的文章

Assassin暗殺者-自用短小精悍的webshell管理工具分享

閱讀 2490·2021-11-24 09:39
bootstrap4.0 css架構(gòu)

閱讀 3532·2019-08-30 15:53
前端每日實戰(zhàn)：9# 視頻演示如何用純 CSS 創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效

閱讀 607·2019-08-29 15:15
對api請求封裝的探索和總結(jié)

閱讀 2913·2019-08-26 13:23
寫一個 JS 調(diào)用棧可視化工具 hound-trace

閱讀 3229·2019-08-26 10:48
vue單頁應(yīng)用的內(nèi)存泄露定位和修復(fù)（一）

閱讀 654·2019-08-26 10:31
2019前端秋季社招面試經(jīng)歷總結(jié)（三年經(jīng)驗）

閱讀 780·2019-08-26 10:30
【Vue原理】Computed - 源碼版

閱讀 2374·2019-08-23 18:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

promise 實現(xiàn)（es6 完整源碼）

相關(guān)文章

JavaScript 異步

JS筆記

***es6* promise源碼*實現(xiàn)***

簡單實現(xiàn) ES6 Promise

**淺析es6-promise源碼**

發(fā)表評論

0條評論

solocoder

男|高級講師

TA的文章

Assassin暗殺者-自用短小精悍的webshell管理工具分享

bootstrap4.0 css架構(gòu)

前端每日實戰(zhàn)：9# 視頻演示如何用純 CSS 創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效

對api請求封裝的探索和總結(jié)

寫一個 JS 調(diào)用棧可視化工具 hound-trace

vue單頁應(yīng)用的內(nèi)存泄露定位和修復(fù)（一）

2019前端秋季社招面試經(jīng)歷總結(jié)（三年經(jīng)驗）

【Vue原理】Computed - 源碼版

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

promise 實現(xiàn)（es6 完整源碼）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！