Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (二)

Michael_Lin 發(fā)布于2019-08-21 16:01 / 3457人閱讀

摘要：開始前的實(shí)現(xiàn)原理已經(jīng)在規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié)一中說的很清楚了，這里將詳細(xì)分析規(guī)范中的解析過程，最后會實(shí)現(xiàn)一個并提供用于測試的代碼方法分析這里的調(diào)用會產(chǎn)生一個新的不同實(shí)例對于上一級的終值會作為的參數(shù)被傳入對于如果返回一個返回一個那么的狀態(tài)和值由決

開始前

Promise的實(shí)現(xiàn)原理已經(jīng)在 Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (一) 中說的很清楚了，這里將詳細(xì)分析 Promises/A+規(guī)范中的Promise解析過程，最后會實(shí)現(xiàn)一個 Promise 并提供用于測試的代碼

then 方法分析

promise.then(fn1).then(fn2).then(fn3) 這里 promise.then() 的調(diào)用會產(chǎn)生一個新的promise（不同實(shí)例）

對于 then(fn) 上一級 promise 的終值會作為 fn 的參數(shù)被傳入

對于 then(fn) 如果 then 返回一個 promise1,fn 返回一個 promise2 那么 promise1 的狀態(tài)和值由 promise2 決定

對于 then(fn) 如果 then 返回一個 promise1,fn 返回一個 promise2 我們想依賴于promise2 的調(diào)用會被添加到 promise1中

如何讓 promise2 決定 promise1 的結(jié)果

如果promise2 有 then 方 var promise2Then = promise2.then，我們這樣promise2Then.bind(promise1,resolve,reject)

promise 的狀態(tài)和終值都是通過當(dāng)前 promise 的 resolve 和 reject 來改變的，所以只需要將 promise1 的這兩個函數(shù)通過promise2 的 then 方法添加的 promise2 的執(zhí)行隊列中就可以達(dá)到想要的效果

Promise 解析過程

對于 promise.then(fn),then 方法返回 promise1，fn 方法返回 x,fn 接收到的參數(shù)為 y，這時需要對 x 和 y 分別運(yùn)行Promise解析過程

x: [[Resolve]](promise1, x)
y: [[Resolve]](promise1, y)
x 的解析過程處理的是回掉中返回 promise 的情況
y 的解析過程處理的是向當(dāng)前 promise 傳遞處理結(jié)果的那個 promise 的終值是 promise 的情況

由此可見 promise 的解析過程是遞歸的，遞歸的終點(diǎn)是 x,y 不是promise，在是對象或者函數(shù)的情形下不具備 then 方法

代碼結(jié)構(gòu)

(function(window) {
    var PENDING = 0; //PENDING 狀態(tài)
    var RESOLVED = 1; //RESOLVED 狀態(tài)
    var REJECTED = 2; //REJECTED 狀態(tài)
    function IPromise(fn) {
        if (!(this instanceof IPromise)) return new IPromise(fn); //確保 通過 new IPromise() 和 IPromise() 都能正確創(chuàng)建對象
        var state = PENDING; //promise 狀態(tài)
        var value = null; //終值
        var callback = []; //回掉函數(shù)隊列，在一種是兩個隊列，這里是一個，所以存放的是對象

        function reject(reason) {} //reject 方法
        function resolve(result) {} //和(一)中的對比 這里多了 執(zhí)行 Promise 解析過程 的功能
        function handle(handler) {} //添加或執(zhí)行隊 callback 中的調(diào)用

        /**
        *@param onFulfilled 通過 then 方法添加的 onFulfilled
        *@param onRejected 通過 then 方法添加的 onRejected
        *
        *@func 包裝用戶添加的回調(diào) 
        *因為這里只有一個回掉隊列所以需要用 candy(糖果) 包裝成{onFulfilled:onFulfilled,onRejected:onRejected}
        *
        *@func 延遲調(diào)用handle
        *在 Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (一) 中說 Promise(瀏覽器實(shí)現(xiàn)) 會被加入到microtask，由于瀏覽器沒有提供除Promise
        *之外microtask的接口，所以 我們要用 setTimeout 來延遲調(diào)用并添加到 macrotask
        *
        */
        function candy(onFulfilled, onRejected) {}

        function getThen(value) {} //判斷 value 是否有 then 方法如果有則獲取

        this.then = function(onFulfilled, onRejected) {} //暴露的 then 方法
        doResolve(fn, resolve, reject); //執(zhí)行 fn
        window.IPromise = IPromise; //將 IPromise 添加到瀏覽器的 window 上
    }
    /**
    *Promise 解析過程
    */
    function doResolve(fn, resolvePromise, rejectPromise) {} //靜態(tài)私有方法，解析并執(zhí)行promise(解析并執(zhí)行fn和promise的處理結(jié)果)
})(window);

以上通過 js 自執(zhí)行函數(shù)將變量和函數(shù)限制在了作用域中，在全局的 window 上只暴露一個構(gòu)造函數(shù) IPromise 保證了全局不被污染

具體代碼及解釋(請在瀏覽器中運(yùn)行)

/**
 *@author ivenj
 *@date 2016-12-06
 *@version 1.0 
 */
(function(window) {
    var PENDING = 0;
    var RESOLVED = 1;
    var REJECTED = 2;

    function IPromise(fn) {
        if (!(this instanceof IPromise)) return new IPromise(fn);
        var state = PENDING;
        var value = null;
        var callback = [];

        function reject(reason) {
            state = REJECTED;
            value = reason;
            callback.forEach(handle);
            callback = null;
        }

        /**
        * 這里新增的內(nèi)容是 滿足Promise解析過程時 resolve和doResolve相互調(diào)用形成遞歸
        **/
        function resolve(result) {
            try {
                var then = getThen(result);
                if (then) {
                    doResolve(then.bind(result), resolve, reject);  //aa
                    return; //這里如果 resule 是有 then 方法則執(zhí)行 doResolve 并返回不執(zhí)行后續(xù)代碼
                }
                //只有 result 不滿足 解析過程時執(zhí)行，即遞歸終點(diǎn)
                state = RESOLVED;
                value = result;
                callback.forEach(handle);
                callback = null;
            } catch (e) {
                reject(e);
            }
        }

        function handle(handler) {
            if (state === PENDING) {
                callback.push(handler);
            } else {
                if (state === RESOLVED && typeof handler.onFulfilled === "function") {
                    handler.onFulfilled(value);
                }
                if (state === REJECTED && typeof handler.onRejected === "function") {
                    handler.onRejected(value);
                }
            }
        }

        function candy(onFulfilled, onRejected) {
            setTimeout(function() {
                handle({
                    onFulfilled: onFulfilled,
                    onRejected: onRejected
                });
            }, 0);
        }

        function getThen(value) {
            var type = typeof value;
            if (value && (type === "object" || type === "function")) {
                try{
                    var then = value.then;
                }catch(e){
                    reject(e);
                }
                if (typeof then === "function") {
                    return then;
                }
            }
            return null;
        }

        this.then = function(onFulfilled, onRejected) {
            var self = this;
            return new IPromise(function(resolve, reject) {
                candy(function(x) {
                    if (typeof onFulfilled === "function") {
                        try {
                            resolve(onFulfilled(x)); //cc 運(yùn)行 [[Resolve]](promise, x)
                        } catch (e) {
                            reject(e);
                        }
                    } else {
                        resolve(x);
                    }
                }, function(error) {
                    if (typeof onRejected === "function") {
                        try {
                            resolve(onRejected(error));
                        } catch (e) {
                            reject(e);
                        }
                    } else {
                        reject(error);
                    }
                });
            });
        };
        doResolve(fn, resolve, reject);
    }

    /**
    *Promise 解析過程
    */
    function doResolve(fn, resolvePromise, rejectPromise) {
        var done = false; //用于保證只調(diào)用一次
        try {
            fn(function(y) {
                if (done) return;
                done = true;
                resolvePromise(y); //bb 如果 resolvePromise 以值 y 為參數(shù)被調(diào)用，則運(yùn)行 [[Resolve]](promise, y)
            }, function(reason) {
                if (done) return;
                done = true;
                rejectPromise(reason);
            });
        } catch (e) {
            if (done) return;
            done = true;
            rejectPromise(e);
        }
    }
    window.IPromise = IPromise;
})(window);

這里是用于測試的代碼讀者將以上代碼和以下代碼粘貼到瀏覽器去運(yùn)行一秒后會打印 {url: "http://ivenj_", value: 10}

function post(url, callback) {
    setTimeout(function() {
        var data = { //模擬異步處理結(jié)果
            url:url,
            value:10
        };
        callback(data);
    }, 1000);
}

var promise = IPromise(function(resolve, reject){
    post("http://ivenj_", function(data){
        resolve(data);
    });
});

promise.then(function(data){
    console.log(data);
});

Promise 實(shí)現(xiàn)最核心的內(nèi)容是代碼中的 //aa //bb //cc 讀者需要著重體會這三處
Promise 到此已經(jīng)結(jié)束

云服務(wù)器 GPU云服務(wù)器 ECS安全組規(guī)則實(shí)現(xiàn)細(xì)節(jié) jquery_promise實(shí)現(xiàn) 實(shí)現(xiàn)二叉樹 java實(shí)現(xiàn)二次握手

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

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

發(fā)表評論

登陸后可評論

0條評論

Michael_Lin

男|高級講師

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

TA的文章

【黑五】RackNerd：$10.88/年/768MB內(nèi)存/12GB SSD空間/1TB流量/1Gb

閱讀 1212·2021-11-24 11:16
程序人生之周記

閱讀 3440·2021-11-15 11:38
DMIT：香港cn2 gia vps，lite輕量版大帶寬vps，1核/0.75G內(nèi)存/10G SS

閱讀 1953·2021-10-20 13:47
Java和c計算器

閱讀 559·2021-09-29 09:35
云主機(jī)和服務(wù)器哪個好-想建一個服務(wù)器，使用云服務(wù)器好些還是個人電腦好些？

閱讀 2208·2021-09-22 15:17
編寫一個并發(fā)性能測試的小程序

閱讀 1028·2021-09-07 09:59
下拉滑動二級菜單

閱讀 3395·2019-08-30 13:21
博客引入漂亮字體二三事

閱讀 2919·2019-08-30 12:47

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

資訊專欄INFORMATION COLUMN

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

Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (二)

相關(guān)文章

Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (一)

**理解 Promise 的工作原理**

Promises A+規(guī)范原文解讀 + es6實(shí)現(xiàn)（附詳細(xì)注釋）

超詳細(xì)的webpack原理解讀

**一步一步實(shí)現(xiàn)一個符合PromiseA+規(guī)范的Promise庫（2）**

發(fā)表評論

0條評論

Michael_Lin

男|高級講師

TA的文章

【黑五】RackNerd：$10.88/年/768MB內(nèi)存/12GB SSD空間/1TB流量/1Gb

程序人生之周記

DMIT：香港cn2 gia vps，lite輕量版大帶寬vps，1核/0.75G內(nèi)存/10G SS

Java和c計算器

云主機(jī)和服務(wù)器哪個好-想建一個服務(wù)器，使用云服務(wù)器好些還是個人電腦好些？

編寫一個并發(fā)性能測試的小程序

下拉滑動二級菜單

博客引入漂亮字體二三事

最新活動

資訊專欄INFORMATION COLUMN

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

Promise 規(guī)范解讀及實(shí)現(xiàn)細(xì)節(jié) (二)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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