您好,欢迎访问一九零五行业门户网

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实现思路的深入分析(代码示例)的详细内容。
其它类似信息

推荐信息