码迷,mamicode.com
首页 > 编程语言 > 详细

拆开 JavaScript Promise 理解一波再组装起来

时间:2018-10-17 00:08:31      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:amp   ||   异或   fir   rstp   error   oba   global   分享   

准备好材料、工具,开拆!!!

一个 Promise 的运用:

var firstPromise = new Promise(function(resolve,reject){
    setTimeout(function(){
        var result = Math.random() <= 0.5 ? 1:0;
        if(result){
            resolve(‘resolved‘);
        }else{
            reject(‘rejected‘)
        }
    },1000)
})

var secondPromise = new Promise(function(resolve,reject){
    setTimeout(function(){
        var result = Math.random() <= 0.5 ? 1:0;
        if(result){
            resolve(‘resolved‘);
        }else{
            reject(‘rejected‘)
        }
    },2000)
})

firstPromise.then(function(value){ 
    console.log(value);
    return secondPromise;
},function(reason){
    console.log(reason);
    return secondPromise;
}).then(function(value){ 
    console.log(value);
},function(reason){
    console.log(reason);
})

//  1s后随机输出结果 resolved 或者 rejected
//  再1s后随机输出结果 resolved 或者 rejected

效果如上,在一个 promise 被完成/被拒绝时执行对应的回调取到异步结果。

同时,以上代码使用 promise 避免了回调地狱,规范了回调操作。

接下来,把 promise 拆成几块,学习一下怎么样的实现过程。

板块一、Promise 构造函数

创建 promise 对象的构造函数,是创造 promise 的工厂。

基础要求:Promise 函数仅产生一个对象,避免大量变量的污染,将该藏好的对象/值藏好,该暴露的暴露;Promise 接收一个函数作为参数,且该函数在构造 promise 对象时被执行;Promise 必须有个 .then 方法(后续方法可自行扩展)。

function Promise(fn){
    this.then = function(){ };
}

板块二、初始化过程,处理参数fn

Promise 构造函数参数 fn 中传入 resolve/reject;Promise 初始化的时候执行 fn 并在 promise 得到最终结果后执行传入的 resolve/reject ;resolve/reject 函数中执行 promise 中指定的完成/拒绝时回调函数,并以最终结果作为参数。

function Promise(fn){

    // 完成时
    function resolve(value) {
        console.log(‘value ‘,value);
    }

    // 拒绝时
    function reject(reason) {
        console.log(‘reason ‘,reason);
    }

    // 执行传入的fn
    function init(fn, onResolved, onRejected) {
        try {
            fn(function (value) {
                onResolved(value);
            }, function (reason) {
                onRejected(reason);
            })
        } catch (err) {
            onRejected(err);
        }
    }

    init(fn, resolve, reject);
    
    this.then = function(){ };
}

var promise = new Promise(function(resolve,reject){ 
    setTimeout(function(){
        var result = Math.random() <= 0.5 ? 1:0;
        if(result){
            resolve(‘resolved‘) 
        }else{
            reject(‘rejected‘)
        }
    },1000) 
})

// 1s后随机输出 value resolved 或者 reason rejected

板块三、.then 里的处理流程

在promise中, .then 将传入的 resolvedHandle 和 rejectedHandle 函数存入 promise 的 handlers 中作为回调列表中的一项,在需要的时候(Promise被完成的时候)携带最终结果执行。

首先,假设有个异步操作,而且已经知道回调函数是什么,代码如下:

var resolvedHandle = function(res){ console.log(res) };
var rejectedHandle = function(err){ console.log(err) };

setTimeout(function(){
    var result = Math.random() <= 0.5 ? 1:0;
    if(result){
        resolvedHandle(‘resolved‘);
    }else{
        rejectedHandle(‘rejected‘);
    }
},1000)

// 1s后输出 resolved 或者 rejected

而对于 promise 而言,回调函数是在 .then 中传入并且在 promise 中给定义的,并且为了实现链式的操作, .then 中必须有返回一个对象,且对象须是一个携带 .then 方法的对象或函数或为一个 promise ,才足以继续执行.then。

// fn 作为初始化Promise时传入的函数,应该被立即执行并取出其中的调用
function Promise(fn) {

    var $resolveHandle = function (res) { };
    var $rejectHandle = function (err) { };

    // 执行Promise被完成时函数
    function resolve(value) {
        try {
            var then = getThen(value);
            if (then) {
                init(then.bind(value), resolve, reject);
                return;
            };
            fulfill(value);
        } catch (err) {
            reject(err);
        }
    }

    // 完成时
    function fulfill(value) {
        $resolveHandle(value);
        $resolveHandle = null;
    }

    // 拒绝时
    function reject(reason) {
        $rejectHandle(reason);
        $rejectHandle = null;
    }

    // 执行传入的fn并执行回调
    function init(fn, onResolved, onRejected) {
        try {
            fn(function (value) {
                onResolved(value);
            }, function (reason) {
                onRejected(reason);
            })
        } catch (err) {
            onRejected(err);
        }
    }

    init(fn, resolve, reject);

    function getThen(value) {
        var t = typeof value;
        if (value && (t === ‘object‘ || t === ‘function‘)) {
            var then = value.then;
            if (typeof then === ‘function‘) {
                return then;
            }
        }
        return null;
    };

    this.then = function (resolveHandle, rejectHandle) {
        return new Promise(function (resolve, reject) {
            $resolveHandle = function (result) {
                resolve(resolveHandle(result));
            }
            $rejectHandle = function (reason) {
                resolve(rejectHandle(reason));
            }
        })
    }
}

var firstPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var result = Math.random() <= 0.5 ? 1 : 0;
        if (result) {
            resolve(‘resolved‘);
        } else {
            reject(‘rejected‘);
        }
    }, 1000);
})

var secondPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var result = Math.random() <= 0.5 ? 1 : 0;
        if (result) {
            resolve(‘resolved 2‘);
        } else {
            reject(‘rejected 2‘);
        }
    }, 2000);
})

firstPromise.then(function (res) {
    console.log(‘res ‘, res);
    return secondPromise;
}, function (err) {
    console.log(‘rej ‘, err);
    return secondPromise;
}).then(function (res) {
    console.log(‘res 2 ‘, res);
}, function (err) {
    console.log(‘rej 2 ‘, err);
})

// 1s后随机输出 res resolved  或者  rej rejected
// 又1s后输出 res 2 resolved 2 或者 rej 2 rejected 2 

至此,上面的代码基本算是满足了一个 promise 的实现思路,但离正规军 promise 实现还存在一段距离

o(╥﹏╥)o...接下去学习吧。

板块四、Promise/A+规范

由于 Promise/A+规范较长,就不放到文章里了,给链接吧(中午版是自己翻译的,有出入的地方还请以英文原版为准)

Promise/A+ 规范 [ 原文 ]

Promise/A+ 规范 [ 译文 ]

对照promise/A+规范,以上的Promise代码还存在问题:

  1.promise还需要存储promise状态和最终结果,以便后续被多次使用;

  2.同一个promise的.then方法中注册的回调函数可被多次执行,且回调函数可以是个列表;

  3.事件调度,回调函数应该在本轮.then方法所在事件队列结束后被调用;

  4.捕捉错误并做拒绝处理;

  更多细节...

继续改进,最后整改后的代码大致是这样的:

function Promise(fn) {
    /* state
    * 0 : pending 
    * 1 : resloved 
    * 2 : rejected 
    */
    var state = 0;
    var value = null;
    var handlers = [];

    function fulfill(result) {
        state = 1;
        value = result;
        handlers.forEach(handle);
        handlers = [];
    };

    function reject(error) {
        state = 2;
        value = error;
        handlers.forEach(handle);
        handlers = [];
    };

    function resolve(result) {
        try {
            var then = getThen(result);
            if (then) {
                init(then.bind(result), resolve, reject);
                return;
            }
            fulfill(result);
        } catch (err) {
            reject(err);
        }
    };

    function getThen(value) {
        var type = typeof value;
        if (value && (type === ‘object‘ || type === ‘function‘)) {
            var then = value.then;
            if (typeof then === ‘function‘) {
                return then;
            }
        }
        return null;
    };

    function handle(handler) {
        if (state === 0) {
            handlers.push(handler);
        } else {
            if (typeof handler.onResolved === ‘function‘) {
                if (state === 1) {
                    handler.onResolved(value);
                };
                if (state === 2) {
                    handler.onRejected(value);
                };
            }
        }
    };

    // 放到事件队列最后,在本轮事件执行完后执行
    function timeHandle(callback, newValue) {
        setTimeout(function () {
            callback(newValue);
        }, 0)
    }

    function init(fn, onResolved, onRejected) {
        try {
            fn(function (value) {
                timeHandle(onResolved, value);
            }, function (reason) {
                timeHandle(onRejected, reason);
            });
        } catch (err) {
            timeHandle(onRejected, err);
        }
    };

    init(fn, resolve, reject);

    this.then = function (onResolved, onRejected) {
        if (!onResolved && !onRejected) {
            throw new TypeError(‘One of onResolved or onRejected must be a function.‘)
        };
        return new Promise(function (resolve, reject) {
            handle({
                onResolved: function (result) {
                    if (typeof onResolved === ‘function‘) {
                        try {
                            resolve(onResolved(result));
                        } catch (err) {
                            reject(err);
                        }
                    } else {
                        resolve(result);
                    }
                },
                onRejected: function (error) {
                    if (typeof onRejected === ‘function‘) {
                        try {
                            resolve(onRejected(error));
                        } catch (err) {
                            reject(err);
                        }
                    } else {
                        reject(error);
                    }
                }
            })
        })
    };
}

var firstPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var result = Math.random() <= 0.5 ? 1 : 0;
        if (result) {
            resolve(‘resolved 1‘);
        } else {
            reject(‘rejected 1‘);
        }
    }, 1000);
})

var secondPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var result = Math.random() <= 0.5 ? 1 : 0;
        if (result) {
            resolve(‘resolved 2‘);
        } else {
            reject(‘rejected 2‘);
        }
    }, 3000);
})

firstPromise.then(function (res) {
    console.log(‘res 1 ‘, res);
    return secondPromise;
}, function (err) {
    console.log(‘rej 1 ‘, err);
    return secondPromise;
}).then(function (res) {
    console.log(‘res 2 ‘, res);
}, function (err) {
    console.log(‘rej 2 ‘, err);
})

/* *
 * 1s后输出 res 1 resolved 1 或者 rej 1 rejected 1
 * 2s后输出 res 2 resolved 2 或者 rej 2 rejected 2
 * */

通过板块一、二、三的知识点,即可大致摸清promise的实现;板块四加上一些补充和限制,遵循一些规范,提高promise功能的可扩展性。

学会了怎么理解promise,更重要的是学会正确的使用它。

正确使用 Promise

promise 在业务开发中多用来处理异步或者多层回调的情况。

基础使用 Promise MDN 及相关介绍文档中的案例为准,这里不一一赘述了... 这里简单的列出两个在使用 promise 过程中比较需要注意的点:

1. 不同平台环境下 Promise 的方法和遵循规则略微有些出入,详情以各平台环境下的 Promise 对象为基准。

  如 es6 Promise 存在Promise.race,Promise.all等方法,node中则没有这些方法。

  如 浏览器 Promise 事件调度走的是 setTimeout,node 走的是 process.nextTick 。(参考 [asap] )

2. Promise 虽可解决回调操作的规范问题(回调地狱),但也不能滥用 Promise (可能会占用过多内存)。

promise 解决后的结果会被存于内存中,被对应 promise 引用着,将上面的最终代码中测试的两个 promise 改成如下:

var firstPromise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            var result = Math.random() <= 0.5 ? 1 : 0;
            var str = ‘‘;
            var i = 0, num = 500000;
            for (; i < num; i++) {
                str += ‘promise ‘
            }
            if (result) {
                resolve(‘resolved 1 : ‘ + str);
            } else {
                reject(‘rejected 1 : ‘ + str);
            }
        }, 1000);
    })

则内存占用情况如下:

技术分享图片

这些是一些平台差异或业务需求方面的不同点,对 Promise 核心实现并影响甚微,对 Promise 扩展方法有影响,对业务中 Promise 的使用有影响。

参考

1. Promise/implementing 

2. Promise 实现代码阅读

 

拆开 JavaScript Promise 理解一波再组装起来

标签:amp   ||   异或   fir   rstp   error   oba   global   分享   

原文地址:https://www.cnblogs.com/ys-ys/p/9800971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!