demo_08 关于Promise的简单用法

// 示例1： 效果 => 隔两秒输出resolve里指定的内容

/*

new Promise(resolve => {

    setTimeout(() => {

        resolve('hello')

    }, 2000)

}).then(res => {

    console.log(res)

})

*/

// 示例2： 效果 => 分两次执行依次输出指定内容  异步操作

/*

new Promise(resolve => {

    setTimeout(() => {

        resolve('hello')

    }, 2000)

}).then(val => {

    console.log(val) //  参数val = 'hello'

    return new Promise(resolve => {

        setTimeout(() => {

            resolve('world')

        }, 2000)

    })

}).then(val => {

    console.log(val) // 参数val = 'world'

})

*/

// 示例3 promise完成后then()

// 结论：在任何一个地方生成了一个promise队列之后，我们可以把他作为一个变量传递到其他地方

/*

let pro = new Promise(resolve => {

    setTimeout(() => {

        resolve('hello world')

    }, 2000)

})

setTimeout(() => {

    pro.then(value => {

        console.log(value)   // hello world

    })

}, 2000)

*/

//示例3： 模拟做饭

//切菜

/*

function cutUp() {

    console.log('开始切菜。');

    var p = new Promise(function(resolve, reject) { //做一些异步操作

        setTimeout(function() {

            console.log('切菜完毕！');

            resolve('切好的菜');

        }, 1000);

    });

    return p;

}

//烧水

function boil() {

    console.log('开始烧水。');

    var p = new Promise(function(resolve, reject) { //做一些异步操作

        setTimeout(function() {

            console.log('烧水完毕！');

            resolve('烧好的水');

        }, 1000);

    });

    return p;

}

// 批量执行

Promise.all([cutUp(), boil()])

    .then((result) => {

        console.log('准备工作完毕');

        console.log(result);  // 将 resolve 的值添加到数组返回

    })

输出结果：异步数据

开始切菜。

开始烧水。

切菜完毕！

烧水完毕！

准备工作完毕

Array(2) ["切好的菜", "烧好的水"]

*/

// 示例4：reject的用法

/*

function promiseClick() {

    let p = new Promise(function(resolve, reject) {

        setTimeout(function() {

            var num = Math.ceil(Math.random() * 20); //生成1-20的随机数

            console.log('随机数生成的值：', num)

            if (num <= 10) {

                resolve(num);

            } else {

                reject('数字大于10了即将执行失败回调');

            }

        }, 2000);

    })

    return p

}

promiseClick().then(

    function(data) {

        console.log('resolved成功回调');

        console.log('成功回调接受的值：', data);

    },

    function(reason, data) {

        console.log('rejected失败回调');

        console.log('失败执行回调抛出失败原因：', reason);

    }

);

成功的回调：

随机数生成的值： 4

resolved成功回调

成功回调接受的值： 4

失败的回调：

随机数生成的值： 15

rejected失败回调

失败执行回调抛出失败原因： 数字大于10了即将执行失败回调

*/

// 示例5：catch的用法

// 使用catch的好处：.then方法中除了reject错误之外，代码本身错误也会进入到catch里，而不是控制台报错不往下运行了

/*

function promiseClick() {

    let p = new Promise(function(resolve, reject) {

        setTimeout(function() {

            var num = Math.ceil(Math.random() * 20); //生成1-20的随机数

            console.log('随机数生成的值：', num)

            if (num <= 10) {

                resolve(num);

            } else {

                reject('数字大于10了即将执行失败回调');

            }

        }, 2000);

    })

    return p

}

promiseClick().then(

        function(data) {

            console.log('resolved成功回调');

            console.log('成功回调接受的值：', data);

            console.log(test) // 这是模拟错误

                // catch失败执行回调抛出失败原因： ReferenceError: test is not defined

                // at d:\nodejs\project\promise.js:156:25

                // at processTicksAndRejections (internal/process/task_queues.js:97:5)

        }

    )

    .catch(function(reason, data) { // 注意 第一个参数 第二个参数 是什么

        console.log('catch到rejected失败回调');

        console.log('catch失败执行回调抛出失败原因：', reason);

    });

成功的回调：

随机数生成的值： 5

resolved成功回调

成功回调接受的值： 5

catch到rejected失败回调

catch失败执行回调抛出失败原因： ReferenceError: test is not defined

    at d:\nodejs\project\promise.js:156:25

    at processTicksAndRejections (internal/process/task_queues.js:97:5)

失败的回调：

随机数生成的值： 11

catch到rejected失败回调

catch失败执行回调抛出失败原因： 数字大于10了即将执行失败回调

*/

// ********************************

/*

一般情况我们一次性调用API就可以完成请求。

有些情况需要多次调用服务器API，就会形成一个链式调用，比如为了完成一个功能，我们需要调用API1、API2、API3，依次按照顺序进行调用，这个时候就会出现回调地狱的问题

promise

promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）

并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据

代码风格，容易理解，便于维护

多个异步等待合并便于解决

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

promise有三个状态：

1、pending[待定]初始状态

2、fulfilled[实现]操作成功

3、rejected[被否决]操作失败

当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；

promise状态一经改变，不会再变。

Promise对象的状态改变，只有两种可能：

从pending变为fulfilled

从pending变为rejected。

这两种情况只要发生，状态就凝固了，不会再变了。

*/