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'
        } )