Vue-promise使用（十）

promise是处理异步的利器，让异步代码变得干净和直观，让异步代码变得井然有序
1、创建promise实例
1）promise后面接收2个参数resolve和reject，这2个参数又是函数
2）resolve代表成功请求，里面可以接参数。后面接then
3）reject代表失败请求，里面可以接参数。后面接catch

new Promise((resolve,reject) => {
        // 2.1..第一次网络请求的代码
        setTimeout(() => {
            // 当使用了resolve函数，那么就会在结尾调用then函数
            resolve()
            console.log('我是Promise封装的setTimeout')
        },1500)
    }).then(() => {
        // 第一次拿到结果的处理代码
        console.log('hello，第一层访问');

2、网络情况复杂，会导致回调地狱，promise帮你解决

new Promise((resolve,reject) => {
        // 2.1..第一次网络请求的代码
        setTimeout(() => {
            // 当使用了resolve函数，那么就会在结尾调用then函数
            resolve()
            console.log('我是Promise封装的setTimeout')
        },1500)
    }).then(() => {
        // 第一次拿到结果的处理代码
        console.log('hello，第一层访问');
        console.log('hello，第一层访问');

        // 如果还有请求，就return  new Promise，以此类推
        return new Promise((resolve, reject) => {
            // 2.2..第二次网络请求的代码
            setTimeout(() => {
                resolve()
            },1000)
        }).then(() =>{
            // 第二次拿到结果的处理代码
            console.log('hello，第二层访问');
            console.log('hello，第二层访问');

            // 第三次请求，继续return
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    // 失败的时候调用reject函数，就不会调用then，而是catch捕获异常
                    reject('error message')
                },1000)
                // 箭头函数如果只有参数的时候，data的小括号可以省略
            }).then((data) => {
                // 因为调用的是reject函数，所以then不会调用
                console.log('hello，第三层访问，我不会被调用打印',data);
            }).catch(err =>  {
                console.log('第三层访问调用reject函数，捕获异常',err);
            })
        })
    })
    // 3..什么情况下会用到promise?
    // 一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
    // new -> 构造函数（1.保存了一些状态信息  2.执行传入的函数）
    // 在执行传入的函数时，会传入2个参数，resolve&reject，它们本身又是函数

3、promise另外表达方式：then(参数1，参数2)
1）then也是函数，所以里面也可以传入参数
2）如果异步请求成功，就执行data箭头函数，如果失败就执行err箭头函数

<script>
    // promise有三种状态：pending（等待），已完成（fulfilled），拒绝（rejected）
    // then方法接受2个参数，第一个参数成功的回调函数resolve，在promise由‘等待’转换到‘完成’；reject相反
    new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve('hello resovle');
            reject('err message');
        },1000)
        // then函数也可以传入两个参数(onfulfilled,onrejected)
    }).then(data => {
        console.log(data);
    },err =>{
        console.log(err);
    })
</script>

4、当异步请求有多个，并且相互关联时候，就需要链式调用，return可以简写
1）这样的链式调用，结构很清晰~~

<script>
    // wrapped into
    // 网络请求：aaa --> 自己处理（10行）；
    // 处理并拼接：aaa111 --> 自己处理（10行）；
    // 处理并拼接：aaa111222 --> 自己处理
    // 简写1：new Promise((resolve) => resolve(结果))
    // 简写2：因为return是直接返回Promise对象，所以可以直接return，去掉Promise.resolve
    new Promise((resolve) => {
        setTimeout(() => {
            resolve('aaa')
        },1000)
    }).then(res => {
        // 1..自己处理10行代码
        console.log(res,'第一层的10行处理代码');

        // 2..对我们的结果进行第一次的处理
        // return new Promise((resolve) => {
        //     resolve(res + '111')
        // })

        // 简写
        // return Promise.resolve(res + '111')

        // reject函数调用，这里也可以手动抛出异常：throw 'error message'
        return Promise.reject('error message')
    }).then(res => {
        console.log(res,'第二层的10行处理代码');

        // 3..对我们的结果进行第二次的处理
        // 简写2：去掉Promise.resolve()，直接return
        return res + '222'
    }).then(res => {
        console.log(res,'第三层的10行处理代码');
    }).catch(err => {
        console.log(err);
    })
</script>

5）Promise.all的使用：当一个请求操作需要多个异步请求都完成时，这里就可以使用Promise.all来判断完成情况

<script>
    // Promise.all的作用就是当一个结果需要2个请求完成时候，promise.all帮忙做了判断
    Promise.all([
        new Promise(resolve => {
            // 第一个异步请求
            setTimeout(() => {
                resolve({name:'result1',age:'10'});
                console.log('我是第一个promise，用时1秒种')
            },1000)
        }),
        new Promise(resolve => {
            // 第二个异步请求，会在2000后才执行then，判断2个异步请求都完毕
            setTimeout(() => {
                resolve({name:'result2',age:'20'});
                console.log('我是第二个promise，用时2秒种')
            },2000)
        })
    ]).then(res => {
        // res[]下角标代表第几个异步请求的结果
        console.log(res[0]);
        console.log(res[1]);
        // 返回res数组
        console.log(res);
    })
</script>

Promise.all结果