热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Promise实现思路的深入分析(代码示例)

本篇文章给大家带来的内容是关于Promise实现思路的深入分析(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
本篇文章给大家带来的内容是关于Promise实现思路的深入分析(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Promise实现思路的个人理解

我一直觉得Promise虽然方便,但是它的写法很怪,无法理解实现Promise的人是如何思考的。

不过最近我对于实现Promise的思考过程的有了一点点个人理解,特此记下。

感觉这篇文章我还是没有把思路说清楚,时间紧张,就当做一次记录,回头我要把这个过程在表达的在清楚一点。

用例

   var p1 = new Promise2( ( resolve, reject ) => {
            setTimeout( () => {
                resolve( 'hello' )
            }, 1000 )

        } )

        p1.then( res => {
                console.log( res + 'world' )
                return res + 'world'
            } )
            .then( res => {
                console.log( res + 'ziwei' )
                return res + 'ziwei'
            } )

我觉得实现一个函数跟封装组件类似,首先从以下几点考虑:

  • 1.这个函数用来做什么的?

  • 2.接受哪些参数

  • 3.返回值是什么

那么结合例子,和这几个问题,我们得到

  • 1.Promise是做异步流程控制的。通俗说就是,我希望某个函数暂时不执行,等我希望它执行时,就resolve一下,你这个函数在执行。

  • 2.构造函数Promise接受一个函数。函数的参数是resolve,reject,resolve和reject也是函数,是给用户调用用的,当用户希望下一个异步执行时,就调用resolve(0

  • 3.返回一个promise实例。 promise实例都有一个then方法,而then方法也返回一个新的promise实例。由此就可以链式调用then了

先实现一个Promise(未实现then的链式调用)
  • 1.Promise接受一个fn,不管其他,你觉得这个fn在内部会干嘛?只能被调用呗,所以虽然不知道怎么搞,但是先调用一下fn(resolve,reject)

  • 2.那这个resolve和reject不是用户实现的,所以肯定是Promise开发者实现的,那我们要实现resolve和reject,它们是干嘛的,肯定用来是改变状态的,所以定义this.state

  • 3.resolve和reject也会接受用户的参数吧,那我们就需要把这个参数用this.value缓存一下,将来then方法调用时,需要传递进去

  • 4.then接受successFn和errorFn,这2个就是我们希望暂时不执行的函数了。怎么做到暂时不执行呢?就是声明2个数组,把他们先存起来,将来resolve时,在调用

        class Promise2 {
            constructor( fn ) {
                this.successFnArray = []  // 用来缓存successFn和errorFn
                this.errorFnArray = []
                this.state = 'pendding'
                const resolve = ( res ) => {      // resolve就做2件事情  1: 修改状态 2:调用successFn
                    this.state = 'fulfilled'
                    this.value = res         // this.value用来缓存data数据或者error

                    this.successFnArray.forEach( successFn => {
                        successFn( res )
                    } )
                }
                const reject = ( err ) => {
                    this.state = 'rejected'
                    this.value = err

                    this.errorFnArray.forEach( errorFn => {
                        errorFn( res )
                    } )
                }
                fn( resolve, reject )   // 先调用fn再说
            }

            then( successFn, errorFn ) {
                switch ( this.state ) {
                    case 'fulfilled':
                        successFn( this.value )        // 如果调用了resolve,状态就成了fulfilled,就会执行successFn
                        break
                    case 'rejected':
                        errorFn( this.value )
                        break
                    case 'pendding':
                        this.successFnArray.push( successFn )   // 如果还没调用resolve,状态就是pendding,就先把这些异步函数缓存起来。将来resole时调用
                        this.errorFnArray.push( errorFn )
                }
            }
        }

        var p1 = new Promise2( ( resolve, reject ) => {
            setTimeout( () => {
                resolve( 'hello' )
            }, 1000 )

        } )

        p1.then( res => {
            console.log( res + 'world' )
            return res + 'world'
        } )

实现then链式调用

then的实现,和JQ的链式调用不同,JQ是每次调用方法后,把this返回

而Promise规范要求,每次都要返回新的Promise对象

所以只需要把then方法修改一下。

这部分可能会迷惑,但是我想先说一下这里做了哪些事情,其实变化不大

之前的then做了哪些事情?

  • 就是按照不同的state,调用了successFn或者errorFn,如果是pendding状态就先缓存起来,等将来resolve时调用

链式then有哪些改动?

  • 首先then有了返回值,返回一个promise,而之前没有返回值,return的是undefined

  • new Promise的过程,其实逻辑没什么变化,唯一注意的,比如状态fulfilled时,并非直接调用successFn

而是调用_successFn,而这个函数内部本质上还是调用successFn(),但同时把调用的返回值作为了resolve的参数,调用了resolve()

因为当successFn被调用,得到返回值时,就表示这个函数执行完了,

就需要执行下一个异步函数了,这样下一个异步函数也会把successFn(res)的return值作为参数

       then( successFn, errorFn ) {
                
                return new Promise2( ( resolve, reject ) => {
                    const _successFn = res => {
                        resolve(successFn(res))
                    }
                    const _errorFn = err => {
                        reject(errorFn(err))
                    }
                    
                    switch ( this.state ) {
                        case 'fulfilled':
                        _successFn( this.value )
                            break
                        case 'rejected':
                        _errorFn( this.value )
                            break
                        case 'pendding':
                            this.successFnArray.push( _successFn )
                            this.errorFnArray.push( _errorFn )
                    }
                } )

            }

以上就是Promise实现思路的深入分析(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • PHP设置MySQL字符集的方法及使用mysqli_set_charset函数
    本文介绍了PHP设置MySQL字符集的方法,详细介绍了使用mysqli_set_charset函数来规定与数据库服务器进行数据传送时要使用的字符集。通过示例代码演示了如何设置默认客户端字符集。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 橱窗设计的表现手法及其应用
    本文介绍了橱窗设计的表现手法,包括直接展示、寓意与联想、夸张与幽默等。通过对商品的折、拉、叠、挂、堆等陈列技巧,橱窗设计能够充分展现商品的形态、质地、色彩、样式等特性。同时,寓意与联想可以通过象形形式或抽象几何道具来唤起消费者的联想与共鸣,创造出强烈的时代气息和视觉空间。合理的夸张和贴切的幽默能够明显夸大商品的美的因素,给人以新颖奇特的心理感受,引起人们的笑声和思考。通过这些表现手法,橱窗设计能够有效地传达商品的个性内涵,吸引消费者的注意力。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • faceu激萌变老特效的使用方法详解
    本文介绍了faceu激萌变老特效的使用方法,包括打开faceu激萌app、点击贴纸、选择热门贴纸中的变老特效,然后对准人脸进行拍摄,即可给照片添加变老特效。操作简单,适合新用户使用。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 大连微软技术社区举办《.net core始于足下》活动,获得微软赛百味和易迪斯的赞助
    九月十五日,大连微软技术社区举办了《.net core始于足下》活动,共有51人报名参加,实际到场人数为43人,还有一位专程从北京赶来的同学。活动得到了微软赛百味和易迪斯的赞助,场地也由易迪斯提供。活动中大家积极交流,取得了非常成功的效果。 ... [详细]
  • 给定一个二叉树,要求随机选择树上的一个节点。解法:遍历树的过程中,随机选择一个节点即可。具体做法参看:从输入 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文介绍了在微店中如何修改分销产品的价格以及设置价格的方法。客户在拍下商品后,在1小时内可以进行修改价格的操作,通过进入订单管理,点击未付款子项,可以找到订单信息并进行改价操作。修改价格后,买家会收到改价后的短信通知,在微店订单中进行付款即可。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
author-avatar
ql3zqi
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有