ES6之promise

最新推荐文章于 2024-09-18 17:26:30 发布

luguilun

最新推荐文章于 2024-09-18 17:26:30 发布

阅读量118

点赞数 1

###简介
学习promise，再次记录一下自己的一点理解及感悟。推荐博客https://www.cnblogs.com/libin-1/p/5947602.html
里面还对比讲解了jquery异步操作$.Deferred()。

###一了解promise

可以看到：
（1）Promise是一个构造函数，有all方法，race方法,rejec方法,resolve方法,prototype属性。
（2）new Promise()为一个实例化化对象，指向原型prototype。
（3）prototype原型上有then方法，catch方法，finally方法。

#####1.Promise.all()
（1）all函数接收一个数组作为参数，最终返回一个Promise实例化对象，待数组内的每个元素都执行完成，才进入then(),成功则进入成功的回调函数，失败则进入失败的回调函数。
（2）all函数将resolve或reject传入的值放入数组中，最后作为成功或失败的回调函数的参数。

延申：
异步操作一般会将执行完成的数据返回给回调函数作为参数，像import(),require(),Promise.race(),$.deffered().resolve()等。

demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Promise 学习笔记</title>
        <script type="text/javascript">
            window.onload = function() {
                function pms1() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务1');
                            resolve('执行任务1成功');
                        }, 2000);
                    });
                }

                function pms2() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务2');
                            resolve('执行任务2成功');
                        }, 2000);
                    });
                }

                function pms3() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务3');
                            resolve('执行任务3成功');
                        }, 2000);
                    });
                }
                Promise.all([pms1(), pms2(), pms3()]).then(function(data) {
                    console.log(data);
                    console.log({}.toString.call(data));
                })
            }
        </script>
    </head>

    <body>

    </body>

</html>

#####2.Promise.race()
race:比赛之意。用法和Promise.all()一样，只是Promise.race()只执行跑的最快的那个元素的回调函数，将跑的最快的那个的resolve数据或reject数据传入then（）的回调函数作为参数。
demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Promise 学习笔记</title>
        <script type="text/javascript">
            window.onload = function() {
                function pms1() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务1');
                            resolve('执行任务1成功');
                        }, 1000);
                    });
                }

                function pms2() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务2');
                            resolve('执行任务2成功');
                        }, 2000);
                    });
                }

                function pms3() {
                    return new Promise(function(resolve, reject) {
                        setTimeout(function() {
                            console.log('执行任务3');
                            resolve('执行任务3成功');
                        }, 3000);
                    });
                }
                Promise.race([pms1(), pms2(), pms3()]).then(function(data) {
                    console.log(data);   //注意上面的延时时间
                })
            }
        </script>
    </head>

    <body>

    </body>

</html>

#####3.resolve()
#####4.reject()
#####5.then()
#####6.catch()
#####7.finally()

3、4、5、6、7整体解析：
（1）new的时候，Promise函数接受一个函数作为参数，该函数的参数又接受resolve和reject作为参数，当函数resolve（）执行then（）里面成功的回调，失败执行失败的回调。
（2）catch()为失败回调函数的语法糖。
（3）finally()不管失败成功都会执行，类似于$.ajax()的complete/always。

基本使用

function doSth() {
    return new Promise(function(resolve, reject) {
        //做点什么异步的事情
        //结束的时候调用 resolve，比如：
        setTimeout(function(){
            resolve(); //这里才是真的返回
        },1000)
    })
}
//写法一
doSth1().then().then().then().catch().finally();

//写法二
doSth1().then(成功回调，失败回调).then(成功回调，失败回调).then(成功回调，失败回调).finally()。

第一种写法：如果任意环节reject,将不会往下then,直接跳到catch()。

###二个人理解总结

异步执行都是先执行主干，主干执行完了才执行异步回调。
（1）必须resolve()或reject()后且主干执行完成才会去执行then()或catch()。
（2）先主干完成才去执行setTimeout()内的函数，计时从该setTimeout()所在作用域代码开始执行为准。
如在函数内，执行函数时开始计时，在script中全局，则开始执行主干代码就开始计时。

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src='./jquery-3.3.1.min.js'></script>
</body>
<script>
    $(function(){
        var dtd = $.Deferred(); // 新建一个Deferred对象
　　    var wait = function(dtd){
　　　　var tasks = function(){
        console.log("jinru task"); 
 　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,10000);
　　　　return dtd;
 　　};
　　$.when(wait(dtd))
 　　.done(function(){ console.log("哈哈，成功了！"); })
　　 .fail(function(){ console.log("出错啦！"); });
 　　dtd.resolve();
    })
    for(var i=0;i<100000;i++){
        $('li').appendTo('body')
    }
    console.log("for结束");
(function(){console.log("自执行函数");})()

setTimeout(function(){console.log("setTimeout是异步执行 先执行主干");},5000)

</script>
</html>