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

 

 

 

你可能感兴趣的:(生命不息,填坑不止)