ES6入门---第二单元 模块四:promise

1、作用:  解决异步回调问题

补充:

异步调用就是你 喊 你朋友吃饭 ,你朋友说知道了 ,待会忙完去找你 ,你就去做别的了。

同步调用就是你 喊 你朋友吃饭 ,你朋友在忙 ,你就一直在那等,等你朋友忙完了 ,你们一起去。

传统方式,大部分用回调函数,事件

语法:

 <script>
        new Promise(function(resolve, reject){
            //resolve,   成功调用
            //reject     失败调用
        });
    </script>
let a = 1;
        let promise = new Promise(function(resolve, reject){
            if(a==10){
                resolve('成功');
            }else{
                reject('失败鸟');
            }
        });

        //promise.then(success, fail);

        promise.then(res=>{
            console.log(res);
        },err=>{     //err可以省略不写 也可以改成catch
            console.log(err);
        })
 promise.catch(err=>{  //reject,发生错误,别名
            console.log(err);
        })

then与catch合并版:

promise.then(res=>{
            console.log(res);
        }).catch(err=>{  //reject,发生错误,别名
            console.log(err);
        })

2、

Promise.resolve('aa') :  将现有的东西,转成一个promise对象, resolve状态,成功状态
        等价于:
        new Promise(resolve =>{
            resolve('aaa')
        });


    Promise.reject('aaa'):   将现有的东西,转成一个promise对象,reject状态,失败状态
        等价于:
        new Promise((resolve, reject) =>{
            reject('aaa')
        });

3、批量处理promise

Promise.all([p1, p2, p3]):  把promise打包,扔到一个数组里面,打包完还是一个promise对象
        必须确保,所有的promise对象,都是resolve状态,都是成功状态

Promise.race([p1, p2, p3]): 只要有一个成功,就返回

 <script>
        let p1 = Promise.resolve('aaaa');
        let p2 = Promise.resolve('bbbb');
        let p3 = Promise.resolve('cccc');

        Promise.all([p1,p2,p3]).then(res=>{
            //console.log(res);
            let [res1, res2, res3] = res;

            console.log(res1, res2, res3);
        })
    </script>

若出现reject就要有catch!不然会报错!

例:模拟登录、获取信息

<script>
        let status = 1;
        let userLogin = (resolve, reject) =>{
            setTimeout(()=>{
                if(status == 1){
                    resolve({data:'登录成功', msg:'xxx', token:'xxsadfsadfas'});
                }else{
                    reject('失败了');
                }
            },2000);
        };

        let getUserInfo = (resolve, reject) =>{
            setTimeout(()=>{
                if(status == 1){
                    resolve({data:'获取用户信息成功', msg:'asdfasdf', token:'xxsadfsadfas'});
                }else{
                    reject('失败了');
                }
            },1000);
        }

        new Promise(userLogin).then(res=>{
            console.log('用户登录成功');
            return new Promise(getUserInfo);
        }).then(res=>{
            console.log('获取用户信息成功');
            console.log(res);
        })
    </script>

猜你喜欢

转载自blog.csdn.net/qq_41775119/article/details/81714532
今日推荐