Promise函数详解

众所周知，Promise是一个用于方便进行异步操作的回调函数。

手撕代码方便记忆

var promise = new Promise(function (resolve, reject) {
        setTimeout(resolve,1000)
    })

    promise
        .then(
            function () {
                console.log(1)
                return promise
            }
        )

我们来仔细分析。

var promise = new Promise(function (resolve, reject) {
        setTimeout(resolve,1000)
    })

我们定义了一个变量promise，是构造函数Promise的一个实例，Promise接受两个参数，第一个是resolve，第二个是reject。

我们从第二行的延迟1秒触发resolve中也可以看出来，接收的参数resolve应该是一个函数。那么问题来了。这个resolve函数从哪里传递过来呢？请见如下分解。

promise
        .then(
            function () {
                console.log(1)
                return promise
            }
        )

实例化的对象（在这里也就是指promise）的then方法接受两个函数为参数，上面的代码中，then里面的function部分

就是promise接受的第一个函数。这也就解决了我们的疑问。

resolve函数从何而来？答：then方法接受的第一个函数。

问题二：rejecte函数从何而来？答：then方法的第二个参数呗！

这里我也写一下方便大家伙儿记忆。

var promise = new Promise(function (resolve, reject) {
        setTimeout(resolve,1000)
    })

    promise
        .then(
            function () {
                console.log(1)
                return promise
            },
            function () {
                console.log('我是then方法接受的第二个参数，执行到我说明你异步调用失败了啦')
                return promise
            }
        )

接下来我们用promise实现异步调用。

var promise = new Promise(resolve => {
        setTimeout(resolve,1000)
    })

    promise
        .then(
            function () {
                console.log(1)
                return new Promise(resolve => {
                    setTimeout(resolve,1000)
                })
            }
        )
        .then(function () {
            console.log(2)
            return  new Promise(resolve => {
                setTimeout(resolve,1000)
            })
        })

可以把这段代码丢在控制台中看看输出效果。目的是达到了。但是有没有发现一些问题。

第一 我们声明一个promise变量，并用Promise构造函数实例化之后它就会自动执行，是不是并没有达到按需加载的目的？

以这个栗子为栗。我一放在控制台他就输出1，2。但是我想在我调用它的时候再输出是不是这样写就不行了？

第二：每一次then方法我们都需要return一个Promise的实例化对象，这样写是不是很复杂，很臃肿？

所以，现在用的promise都是以下这种形式的，很好的解决的以上两个问题喔！

 

function fn() {
        return new Promise(resolve => {
            setTimeout(resolve,1000)
        })
    }

    fn().then(function () {
        console.log(1)
        return fn()
    }).then(function () {
        console.log(2)
        return fn()
    })