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实现思路的深入分析（代码示例）的详细内容，更多请关注【创想鸟】其它相关文章！