性能文章>Promise链式调用解析>

Promise链式调用解析原创

4月前
184223

Promise链式调用解析

关于Promise是做什么的我就不赘述了,当你看到这个文章的时候,我也就默认你是用过Promise的

首先,举个例子

// 获取用户id
function getUserId() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(186)
      }, 1e3)
    })
}
// 通过用户id获取该用户的手机号
function getMobileByUserId(userId) {
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve(userId + '****5836')
        }, 1e3)
    })
}

两个方法,getUserId(简称 IDfun )和getMobileByUserId(简称 MOfun ),两者都是return了一个Promise实例,前者是获取用户id,后者是拿着用户id去换取手机号,MOfun的输出是依赖于IDfun的输出,这样两个异步的操作又得保证其是有序的执行

到这,应该都有一个对应的解决办法,我这里列举了一个示例:

IDfun()
    .then(MOfun)
    .then(function(res) {
        console.log(res)
    })

首先,调用了IDfun,在其Promise实例的then方法中传入MOfun,紧随其后又是一个then方法,里面传入了一个callback函数,此时,callback函数中打印的值是什么,又是为什么呢,一般情况下then方法里传的都是一个callback,而这个例子里传的却是一个包含Promise的函数,它内部是怎么做到将用户的id传递给MOfun中并打印出来

说到这,我先列举几个Promise中几个比较核心的方法:

// this指向是Promise实例
// 只列举了几个关键的代码
this.then = function (onFulfilled) {
    return new Promise(function (resolve) {
        handle({
            onFulfilled: onFulfilled || null,
            resolve: resolve
        });
    });
};

function handle(deferred) {
    if (state === 'pending') {
        deferreds.push(deferred);
        return;
    }

    var ret = deferred.onFulfilled(value);
    deferred.resolve(ret);
}
// 其中的state和value可以理解为全局定义的,只是放了一些代码段出来
function resolve(newValue) {
    if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
        var then = newValue.then;
        if (typeof then === 'function') {
            then.call(newValue, resolve);
            return;
        }
    }
    state = 'fulfilled';
    value = newValue;     // value这里可以理解为它是在全局定义的
    setTimeout(function () {
        deferreds.forEach(function (deferred) {
            handle(deferred);
        });
    }, 0);
}

参照这几个方法,我们再回到刚才那个例子:

  • 1.执行IDfun返回一个Promise实例( IDPro ),执行IDPro中的代码,假设此时在异步发送请求,继续执行then方法,then方法中传入了MOfun
  • 2.进入到then方法中,也是返回一个Promise实例( BridgePro1 ),调用handle方法

    handle({

    onFulfilled: onFulfilled || null,  // 此时的onFulfilled === MOfun
    resolve: resolve  // resolve是BridgePro1的resolve

    });

  • 3.进入handle中,如果是IDPro的then方法先执行,其resolve后执行,这个时候 state === pending,此时它会将传入的对象push到IDPro的deferreds数组中,然后返回
  • 4.IDPro中异步操作完成,执行其resolve,并传入id为186
  • 5.进入resolve方法中,此时newValue不满足if条件,跳过,继续向下执行,改变state===> fulfilled,value ===> 186,setTimeout为0是为了把其内部的这段代码放到队列的最后,保证执行这段代码的时候then方法已经执行了,循环遍历IDPro的deferreds数组,将数组中的每一项传入handle中并执行
function resolve(newValue) {   // newValue === 186
        if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
            var then = newValue.then;
            if (typeof then === 'function') {
                then.call(newValue, resolve);
                return;
            }
        }
        state = 'fulfilled';
        value = newValue;     // value这里可以理解为它是在全局定义的
        setTimeout(function () {
            // deferreds里存放的是通过then传入的
            // [{
            //    onFulfilled: MOfun,
            //    resolve: resolve
            // }]
            deferreds.forEach(function (deferred) {  
                handle(deferred);
            });
        }, 0);
    }
  • 6.进入handle中,此时state === fulfilled,执行deferred中的onFulfilled(MOfun),传入value,返回一个Promise实例(MOPro),此时的ret === MOPro,继续执行deferred中的resolve(BridgePro1的resolve),传入ret
  // state === fulfilled
    // deferred ===> 
    //  {
    //    onFulfilled: MOfun,
    //    resolve: resolve
    //  }
    function handle(deferred) {
        if (state === 'pending') {
            deferreds.push(deferred);
            return;
        }
    
        var ret = deferred.onFulfilled(value);  // value === 186
        deferred.resolve(ret);
    }
  • 7.进入resolve中,此时newValue满足判断条件
    function resolve(newValue) {   // newValue === MOPro
        if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
            // then 是MOPro的then
            var then = newValue.then;
            if (typeof then === 'function') {
                // 调用then方法,设置其内部this指向为MOPro,并传入resolve,这个resolve为BridgePro1的resolve,然后返回
                then.call(newValue, resolve);
                return;
            }
        }
        state = 'fulfilled';
        value = newValue;     
        setTimeout(function () {
            deferreds.forEach(function (deferred) {  
                handle(deferred);
            });
        }, 0);
    }
  • 8.进入到MOPro的then方法中,调用handle将对象传入,此时MOPro的deferreds数组中有两项,一项是上面通过resolve传入的,另一项是传入的callback函数
// ===> callback
    function(res) {
        console.log(res)
    }

    this.then = function (onFulfilled) {
        // onFulfilled为BridgePro1的resolve 
        // 此时返回的Promise实例为BridgePro2
        return new Promise(function (resolve) {
            handle({
                onFulfilled: onFulfilled || null,
                resolve: resolve  // BridgePro2
            });
        });
    };
  • 9.当MOPro中异步操作执行完成,执行resolve并传入手机号1865836,进入resolve,将state设置为fulfilled,value设置成1865836,延迟循环MOPro的deferreds数组,此时数组为:
[
        {
            onFulfilled: resolve,   // BridgePro1的resolve
            resolve: resolve  // BridgePro2的resolve
        },
        {
             onFulfilled: callback,
            resolve: resolve  // BridgePro3的resolve
        }
    ]
  • 10.进入handle方法中,循环第一个值时,此时deferred的onFulfilled为BridgePro1的resolve,调用该resolve,并传入value(1865836),因为BridgePro1的deferreds为空,所以直接resolve掉BridgePro1,此时ret为undefined,再执行deferred的resolve(BridgePro2的resolve),同样,resolve掉BridgePro2,继续循环,传入第二个值,deferred的onFulfilled为callback,执行callback传入value,打印出手机号1865836,返回值为undefined ,因此ret为undefined,再执行deferred的resolve(BridgePro3的resolve),直接resolve掉BridgePro3
 function handle(deferred) {
        if (state === 'pending') {
            deferreds.push(deferred);
            return;
        }
    
        var ret = deferred.onFulfilled(value);
        deferred.resolve(ret);
    }
  • 11.至此,执行完成,通过user的id换取了user的mobile number

后记:

如果我想按照下面的写法一直then下去:

IDfun()
    .then(MOfun)
    .then(callback)
    .then(callback)
    .then(callback)

每个callback里都可以打印到手机号,应该怎么写

// callback
function callback(res) {
    // doing something
    console.log(res)
    return res
}

总结:

Promise是什么,从字面意思就是一个承诺,我给你了一个承诺,你记着呢,不知道什么时候兑现,但肯定会给你一个答复,打一个不太形象的比喻,我去银行办事,肯定是先取一个号,这个号就像一个承诺,什么时候叫到你,不确定,但肯定会叫你,然后这个时候你就会去办理你的事情,综上,即为Promise链式的原理解析,出错的地方欢迎指出

请先登录,查看2条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
前端性能基础:健康网站的关键指标有哪些?
概览 #Web 指标是 Google 开创的一项新计划,旨在为网络质量信号提供统一指导,这些信号对于提供出色的网络用户体验至关重要。多年来,Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行,而另一些开发者则发现大量的工具和指标令人应接不暇。网站所有者要想了解他
Lighthouse 如何计算网站的整体性能得分?
从为什么分数会波动,它是如何组成的,以及 Lighthouse 如何对每个单独的指标进行评分三部分来介绍lighthouse。
核心web指标对业务的影响
您是否正在努力说服您的利益相关者采用核心 Web 指标? 或者您想知道它是否真的对您的业务有帮助? 本文将通过探索已经对其用户和业务产生积极影响的公司示例,帮助您了解核心 Web 指标如何与关键业务指标相关联。为什么核心 Web 指标对您的用户和业务很重要?组织中的不同利益相关者可以有不同的优先
Promise链式调用解析
Promise链式调用解析关于Promise是做什么的我就不赘述了,当你看到这个文章的时候,我也就默认你是用过Promise的首先,举个例子// 获取用户idfunction getUserId() { return new Promise(function(resolve, rej
3
2
关于作者

白寒,现产研公司资深前端开发工程师,曾就职于爱库存负责直播电商PC、移动端前端搭建,同时针对直播也做过大量的性能优化工作,涉及音视频传输、大数据展示、直播间加载、前端工程化等方面。