es6笔记之九-Promise

Promise: 可理解为承诺，许诺
主要作用: 解决异步回调问题
正常情况下传统方式，大部分都是用回调函数，事件驱动去解决

ajax(url,{  //获取token
    ajax(url,()=>{  //获取用户信息
        ajax(url, ()=>{
        //获取用户相关新闻
    })
    })
})
嵌套模式确保获取到上一层数据再执行内部函数

语法:

let promise = new Promise(function(resolve, reject){
     //resolve,   成功调用
     //reject     失败调用
});
promise.then(success, fail);//成功方法，失败方法
promise.then(res=>{
}, err=>{           
})

实例：

let a = 10;
let promise = new Promise(function(resolve, reject){
    if(a==10){
        resolve('成功');
    }else{
        reject('失败鸟');
    }
});
promise.then(res=>{
    console.log(res);//成功
},err=>{//第二个参数这个方法写得很少，一般直接用catch代替
    console.log(err);
})
promise.catch(err=>{  //reject,发生错误，别名
    console.log(err);//
})

用了catch后then方法的第二个参数方法就不必写了，写了也会报错。

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

推荐用法:

new Promise().then(res=>{

}).catch(err=>{
            
})

Promise.resolve()
将现有的东西，转成一个promise对象， resolve状态/成功状态

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

等价于:

new Promise(resolve =>{
    resolve('aaa')
});
let p2 = new Promise(resolve =>{
    resolve('aaa')
});
p2.then(res=>{
    console.log(res);//aaa
})

Promise.reject()
将现有的东西，转成一个promise对象，reject状态/失败状态
等价于:

new Promise((resolve, reject) =>{
    reject('aaa')
});

let p1 = Promise.reject('aaaa');
p1.then(res=>{
    console.log(res);//当然无输出
}).catch(err=>{
    console.log(err);//aaaa
})

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

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);//["aaaa", "bbbb", "cccc"]
    let [res1, res2, res3] = res;//解构
    console.log(res1, res2, res3);//aaaa bbbb cccc
})

运用场景，将几个请求返回的数据集合在一起。
Promise.race([p1, p2, p3])
按组合的顺序开始返回成功的，知道遇到reject/失败的就停止

let p1 = Promise.resolve('aaaa');
let p2 = Promise.reject('bbbb');
let p3 = Promise.resolve('cccc');

Promise.race([p1,p2,p3]).then(res=>{
    console.log(res);//aaaa
})

通常Promise.all([p1,p2,p3])用得多，配合ajax用

模拟用户登录获取用户信息实例

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);//{data: "获取用户信息成功", msg: "asdfasdf", token: "xxsadfsadfas"}
}).then(res=>{
    console.log('获取用户信息成功');
    console.log(res);
})