ES6之promise

简介

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

一了解promise

1.png

可以看到：
（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.png

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.png

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中全局，则开始执行主干代码就开始计时。