【Vue】Re19 Promise

一、概述

Promise是异步编程的解决方案

异步事件的处理：

封装的异步请求函数不能立即获取结果，

通常会传入另外一个函数，在请求成功的时候将数据通过传入的函数回调出去

如果只是一个简单的请求，那么这种方案非常的麻烦

但是，如果请求非常复杂的时候，就会出现回调地狱

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        // todo ... 开始写 jQuery 代码...
        $.ajax('url-link or api-address', function (data1) {
            $.ajax('url-link or api-address', function (data2) {
                $.ajax('url-link or api-address', function (data3) {
                    $.ajax('url-link or api-address', function (data4) {
                        console.log(data4);
                    })
                })
            })
        });
    });
</script>

二、语法样例：

    /* 链式编程警告 !!!!  */

    /* 构造参数是一个函数 入参函数本身 包括两个参数, 解析 与 拒绝 */
    /* resolve, reject 也是函数。。。 */
    new Promise((resolve, reject) => {
        setTimeout(() => { /* 模拟第一次的异步请求 */
            resolve(); // 调用 resolve 会直接跳转到下面的then函数执行
        }, 1000);
    }).then(() => { /* 第一次得到data结果的处理逻辑 */
        console.log('request01 executed...');
        console.log('request01 executed...');
        console.log('request01 executed...');

        return new Promise((resolve, reject) => {
            setTimeout(() => { /* 第二次的异步请求 */
                resolve();
            }, 1000);
        }).then(() => { /* 第二次得到data结果的处理逻辑 */
            console.log('request02 executed...');
            console.log('request02 executed...');
            console.log('request02 executed...');

            return new Promise((resolve, reject) => {
                setTimeout(() => { /* 第三次的异步请求 */
                    resolve();
                }, 1000);
            }).then(() => {
                console.log('request03 executed...');
                console.log('request03 executed...');
                console.log('request03 executed...');
            });
        });
    });
    /* 上述代码可以看出我们的Promise结构就分为两部分，构造器参数的执行 和 then函数 */
    /* 构造器负责请求的发生， 而then函数负责响应数据的逻辑处理 */

如果是响应失败的情况，再引用catch函数捕获处理：

    new Promise((resolve, reject) => {
        setTimeout(() => { /* 模拟第一次的异步请求 */
            resolve(); // 调用 resolve 会直接跳转到下面的then函数执行
        }, 1000);
    }).then(() => { /* 第一次得到data结果的处理逻辑 */
        console.log('request01 executed...');
        console.log('request01 executed...');
        console.log('request01 executed...');

        return new Promise((resolve, reject) => {
            setTimeout(() => { /* 第二次的异步请求 */
                resolve();
            }, 1000);
        }).then(() => { /* 第二次得到data结果的处理逻辑 */
            console.log('request02 executed...');
            console.log('request02 executed...');
            console.log('request02 executed...');

            return new Promise((resolve, reject) => {
                setTimeout(() => { /* 第三次的异步请求 */
                    resolve();
                }, 1000);
            }).then(() => {
                console.log('request03 executed...');
                console.log('request03 executed...');
                console.log('request03 executed...');
            }).catch(error => {
                console.log(error);
            });
        }).catch(error => {
            console.log(error);
        });
    }).catch(error => {
        console.log(error);
    });

三、Promise的三种状态

Pending等待状态：

请求进行中，定时器尚未到达触发时间

Fullfill满足状态：

主动回调resolve时，回调then函数

Reject拒绝状态：

主动回调rejec时t，回调执行catch函数

四、All方法

语法演示

<!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script src="./../../dependencies/jquery.min.js"></script>
<script type="text/javascript">

    /* all方法注入的是一个数组 */
    Promise.all([
        new Promise((resolve, reject) => {
            $.ajax({
                url : 'url',
                success : data => {
                    resolve(data);
                }
            })
        }),
        new Promise((resolve, reject) => {
            $.ajax({
                url : 'url',
                success : data => {
                    resolve(data);
                }
            })
        }),
    ]).then(results => {
        console.log(results[0]);
        console.log(results[1]);
    });
</script>

案例：

/* 方法注入的是一个数组 */
    Promise.all([
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('result');
            }, 1000);
        }),
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('result');
            }, 1000);
        }),
    ]).then(results => {
        console.log(results);
        console.log(results[0]);
        console.log(results[1]);
    });

应用场景：同时发送两个以上的异步请求