Promise介绍

1. Promise是一个构造函数，既然是构造函数，那么我们就可以new Promise() 得到一个Promise实例；
2. Promise是模拟一些异步操作，对一些异步操作进行封装。（处理一些回调地狱）
3. 在Promise上，有两个函数，分别是resolve（成功后回调函数）reject(失败后回调函数)
4. 在Promise构造函数的 prototype 属性上， 有一个then() 方法, 也就是说，只要是Promise 构造函数创建的实例，都可以访问.then()方法 ， 还有一个catch()方法链式操作时候 当某一个Promise报错时 后续的Promise都会停止操作；
5. 既然Promise的实例，是一个异步操作，那么，这个异步操作的结果只有两种状态
   5.1 状态1： 异步执行成功回调 resolve(success) 把成功的结果返回给调用者
   5.2 状态2： 异步执行失败回调 reject（err）把失败的结果返回给调用者
   5.3 由于Promise的实例，是一个异步操作，所以内部拿到的结果后 不能return 把操作的结果返回给调用者； 这个时候，只能用回调函数形式，来把成功或失败的值 返回给调用者；
   6.我们可以在new 出来的promise 实例上，调用 .then() 方法，【预先】为这个Promise 异步操作，指定成功 resolve 和失败后 reject 回调函数

什么时候用到异步操作呢？

1. 网络请求的时候，要等响应服务后，得到服务器内容，才能回调函数

模拟ajax setTimeout 把它看作ajax
//回调地狱

   setTimeout(() => {
        console.log('Hello world');
        setTimeout(() => {
            console.log('Hello Vue.js');
            setTimeout(()=>{
                console.log('Hello javascript');
            },1000)
        },1000)
    },1000);

通过promise 解决回调地狱

   new Promise((resolve, reject) => {
        setTimeout(() => {
            //模拟ajax
            //ajax成功时 调用 resolve() 然后执行then() 把data传过去
            resolve('Hello World');

            //ajax失败时调用reject() 然后执行catch()
            reject('error')
        },1000);
    }).then((data) => {
        console.log(data);
    }).catch((error) => {
        console.log(error);
    })

Promise 链式操作

new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('111');
        }, 10)
    }).then(data => {
        console.log(data);
        return new Promise((resolve, reject) => {
            resolve(data + ' ' + '222');
        })
    }).then(data => {
        console.log(data);
        return new Promise((resolve, reject) => {
            resolve(data + ' ' +  '333')
        })
    }).then(data => {
        console.log(data);
    });

//上面链式操作代码简写

 new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('111');
        }, 10)
    }).then(data => {
        console.log(data);
        return Promise.resolve(data + ' ' + 222)
    }).then(data => {
        console.log(data);
        return Promise.resolve(data + ' ' + 333)
    }).then(data => {
        console.log(data);
    });

//更加的简写

   new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('111');
        }, 10)
    }).then(data => {
        console.log(data);
        //内部会返回一个promise.resolve()
        //如果这里是reject 就进入catch方法
        return Promise.reject('err');
        //return data + ' ' + 222
    }).then(data => {
        console.log(data);
        //内部会返回一个promise.resolve()
        return data + ' ' + 333
    }).then(data => {
        console.log(data);
    }).catch(err => {
        console.log(err);
    })

Promise.all 方法使用

//判断两个异步是否请求完，请求完后，统一then
// res[0] 获取第一个resolve
// res[1] 获取第二个resolve

    Promise.all([
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('res1');
            }, 100)
        }),
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('res2');
            }, 100)
        }),
    ]).then(res => {
        console.log(res[0]); //res1
        console.log(res[1]); //res2
    })