promise链式调用的应用

 

then在链式调用时,会等前一个then或者函数执行完毕,返回状态,才会执行回调函数。

(1)代码顺序执行,第一步调用了函数cook ,cook执行返回了一个promise,promise返回的是成功状态,即resolve('鸡蛋炒饭'),那么参数“'鸡蛋炒饭'”会传递给下一个then。

(2)第一个then接收“'鸡蛋炒饭'”,执行then的回调。回调中调用了eat,把'鸡蛋炒饭'作为参数传递给了eat。eat执行(里面输出的步骤就不讲了,代码顺序执行,输出的“开始吃饭”等等),并返回promise,promise返回的是成功状态,并给下一个then传递了参数'一块碗和一双筷子'。

(3)第二个then接收'一块碗和一双筷子','执行then的回调。回调中调用了wash,把'一块碗和一双筷子'作为参数传递给了wash。wash执行,并返回promise,promise返回成功状态,并给下一个then传递了参数'干净的碗筷'。

(4)最后一个then,接收'干净的碗筷”,执行回调,输出'干净的碗筷”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
    
    function cook() {
        console.log('开始做饭。');
        var p = new Promise(function(resolve, reject){ 
            setTimeout(function() {
                console.log('做饭完毕!');
                resolve('鸡蛋炒饭');
            }, 1000);
        });
        return p;
    }
    
    function eat(data) {
        console.log('开始吃饭:' + data);  
        var p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                console.log('吃饭完毕!');
                resolve('一块碗和一双筷子');// resolve()的值会传递给then中function的data参数,供下一个方法使用。
            }, 2000);
        });
        //这里的return的作用是把第一个回调函数的返回结果作为参数,传递给第二个回调函数
        return p; 
    }
    function wash(data) {
        console.log('开始洗碗:' + data);
        var p = new Promise(function(resolve, reject) { 
            setTimeout(function() {
                console.log('洗碗完毕!');
                resolve('干净的碗筷');
            }, 2000);
        });
        return p;
}
//补充代码
cook().then(resolve => {
    return eat(resolve)  //第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。所以这里要用return返回函数去传参。
}).then(resolve => {
    return wash(resolve);
}).then(resolve => {
    //在Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

//then方法执行的是resolve这个回调,并且这个函数都接受Promise对象传出的值作为参数。而这里“鸡蛋炒饭”就是作为参数传递的
    console.log(resolve);  //resolve中的值是传递到then方法中的参数,只有在then中通过console.log输出传入的参数,才可以在控制台查看到消息
})
//也可以像下面这样写,因为这三个函数本身设置的有return才可以这样直接写
//下一个then的回调函数,会等上一个then中的回调函数执行完毕,返回promise状态,就执行.
//首先eat,wash本身就是一个函数,所以可以直接作为then中的回到函数.
//然后eat,wash函数内部也返回了promise,所以这样写没有问题.
cook()
    .then(eat)
    .then(wash);

</script>
</body>
</html>
                                                                                                            

 

 

.then 中
1.return返回一个值,将返回的值作为下一个then中回调函数的参数值
2.如果返回的是一个promise对象,将这个Promise 接受状态的回调函数中参数值作为下一个then回调函数的参数值。

.then(fn(argument){})中的匿名函数实际上就是执行实例化Promise对象中的resolve(),当resolve(argument)中有参数时,可以将参数传给.then()中的匿名函数

这里原理都是一样的,就是Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。且都会返回一个Promise实例,所以可以链式调用then方法,上一个的返回值,可以作为下一个的参数。
posted @ 2020-07-10 22:09  是桂  阅读(1810)  评论(0编辑  收藏  举报