promise应用

提示：并发请求,先请求三个接口，再请求下个接口。

一、 Promise对象有三种状态，他们分别是：

pending: 等待中，或者进行中，表示还没有得到结果

resolved(Fulfilled): 已经完成，表示得到了我们想要的结果，可以继续往下执行

rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行

Promise.all：

当一个请求，它的参数需要另外2个甚至更多请求都有返回结果之后才能确定，

那么这个时候，就需要用到Promise.all来帮助我们应对这个场景。

promise.all()

 在ES6中可以将多个Promise.all异步请求并行操作：

1.当所有结果成功返回时按照请求顺序返回成功;

2.当其中有一个失败方法时，则进入失败方法;

getTemple(type){
     return new Promise((resolve,reject)=>{
        // 请求接口参数getTempleList，已经封装
        getTempleList({level:`${type}`}).then((res)=>{
            if(res.code==='000000'){
                // 处理接口请求成功
                resolve(res.data);
                // 需要接收参数
            }else{
                resolve(res.message);
                // 提示错误
            }
        })
        .catch(()=>{
            reject('接口请求不成功的情况');
        });
    });
}，
init(){
    let paramsAll=Promise.all([this.getTemple('USER'),this.getTemple('ORDER'),this.getTemple('NONE')]);
    paramsAll.then((data)=>{
        console.log(data);
        // 返回所有resolve返回的数据
        this.initDetails();
        // 请求详情的接口、异步处理，需要前三次请求全部完毕后，才能进行后续操作。
    })
    .catch((err)=>{
        console.log(data);
        // 接口请求不成功的情况
    });
}

promise.race()

Promise.race

与Promise.all相似的是，Promise.race都是以一个Promise对象组成的数组作为参数，

不同的是，只要当数组中的其中一个Promsie状态变成resolved或者rejected时，

就可以调用.then方法了。

 

下面是一个promise（）的例子

运营端加载空白页面的时候，需要先请求权限的接口

或者，有些场景，需要依赖上一步接口返回，则需要用到promise

getUserAuth(){
    return new Promise((resolve)=>{
        // 先判断是否存有，若有，则不重复进行调接口
        const userAuth = sessionStorage.getItem('userAuth');
        if(userAuth){
            // 即使不进行什么操作，也要resolve()出去
            resolve(userAuth);
            // return 不进行下方操作
            return;
        }
        roleAuthList().then((res)=>{
            // 保存权限在sessionStorage中
            sessionStorage.setItem('userAuth',res.data);
            resolve(res.data);  
        })
        .catch(()=>{
           // 接口调不通的情况下，赋值空
            sessionStorage.setItem('userAuth',[]);
           resolve([]);
        });
    });
},
init(){
    this.getUserAuth().then(()=>{
    // 加载页面的处理
    });
}