ES6_Promise

Promise:

解决异步回调问题

传统方式使用的话:大部分用回调函数,事件

• 使用时可以:

<script >
    let a = 10;
    // 返回Promise对象
    let Promis = new Promise(function (resolve, reject) {
        //resolve 成功的时候调用
        // reject 失败的时候调用
        if (a == 10) {
            resolve('成功');
        } else {
            reject('失败');
        }
    });
</script>

• 其中上面的Promis可以接受resolve / reject来进行下一步操作

<script >
//    Promis.then(res=>{
//
//    },err=>{
//
//    })
    // 如:
    Promis.then(res=>{
        console.log(res);
    },err=>{
        console.log(err);
    })
</script>

• 使用catch来接收报错:

<script >
    let a = 10;
    // 返回Promise对象
    let Promis = new Promise(function (resolve, reject) {
        //resolve 成功的时候调用
        // reject 失败的时候调用
        if (a == 10) {
            resolve('成功');
        } else {
            reject('失败');
        }
    });

    // reject,发生错误的别名
    Promis.catch(err => {
        console.log(err);
    })
</script>

• 处理Promise的resolve / reject时,也可以使用 . 连接:

<script >
    let a = 10;
    // 返回Promise对象
    let Promis = new Promise(function (resolve, reject) {
        //resolve 成功的时候调用
        // reject 失败的时候调用
        if (a == 10) {
            resolve('成功');
        } else {
            reject('失败');
        }
    });

    //此处可以直接使用　．连接
    Promis.then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
</script>

也可以使用then() 来接收resolve / reject 的结果

<script >
   new Promise().then(res=>{
  
   },err=>{
  
   })
</script>

• 将现有东西转成一个promise对象

<script >
    let a = 10;
    // 返回Promise对象
    let Promis = new Promise(function (resolve, reject) {
        //resolve 成功的时候调用
        // reject 失败的时候调用
        if (a == 10) {
            resolve('成功');
        } else {
            reject('失败');
        }
    });
     Promise.resolve('aa'): // 将现有东西转成一个promise对象,resolve状态,成功状态
     // 等价于:
     new Promise(resolve => {
         resolve('aaa')
     });
     // 或者:
     Promise.reject('aaa'): // 将现有东西转成一个promise对象,reject状态,失败状态
     // 等价于:
     new Promise(reject => {
         reject('aaa')
     });
</script>

• promise可以传递状态 resolve / reject:

<script >
    p1 = new Promise(resolve => {
        resolve('aaa')
    });
    p1.then(res => {
        console.log(res);
    })
</script>

• Promise.all():

把promise打包,打包完还是一个promise对象

若是其中传入的一个promise对象的状态与其他promise状态不符,会导致报错(必须确保里面所有promise对象都是resolve状态才靠谱)

如:

<script >
    let p1 = Promise.resolve('aaa');
    let p2 = Promise.resolve('bbb');
    let p3 = Promise.resolve('ccc');
    Promise.all([p1, p2, p3]).then(res => {
        // console.log(res);
        let [res1, res2, res3] = res;
        console.log(res1, res2, res3);
    })
</script>

• Promise.race():

只要用一个成功就返回,如:

<script >
    let p1 = Promise.resolve('aaa');
    let p2 = Promise.reject('bbb');
    let p3 = Promise.resolve('ccc');
    Promise.race([p1, p2, p3]).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
</script>

• demo_练习:

<script >
    // 用户登录成功 / 失败 练习
    let status = 1;
    let userLogin = (resolve, reject) => {
        setTimeout(() => {
            if (status == 1) {
                resolve({data: '登陆成功', msg: 'asfasfas', token: 'asfyuiofdgb'});
            } else {
                reject('失败了');
            }
        }, 2000)
    };

    let getUserInfo = (resolve, reject) => {
        setTimeout(() => {
            if (status == 1) {
                resolve({data: '获取用户成功', msg: 'asfasfas', token: 'asfyuiofdgb'});
            } else {
                reject('失败了');
            }
        }, 1000)
    };
    new Promise(userLogin).then(res => {
        console.log('用户登录成功');
        return new Promise(getUserInfo);
    }).then(res => {
        console.log('获取用户信息成功');
        console.log(res);
    })
</script>