多个请求执行完再执行下一个方法(vue Promise.all用法)

vue等多个请求执行完再执行下一个方法可以用promise.all。

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。

Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示。

需要特别注意的是,Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的。

mounted(){
     this.getHouseData()
},
methods: {
//第一个
getUsersexData(){
    let app = this;
    return new Promise((resolve, reject) => {
        ApiFloor.usersex().then(result => {//接口
            result.data.forEach((item,index)=>{
                app.sexData[item.dictValue] = item.dictLabel
            })
            console.log('1')
            resolve(result);
        })
    });
},
//第二个
getNationData(){
    let app = this
    return new Promise((resolve, reject) => {
        ApiFloor.nation().then(result => {//接口
            result.data.forEach((item,index)=>{
                app.nationData[item.dictValue] = item.dictLabel
                })
                console.log('2')
            resolve(result);
        })
    });
},
//最后一个调用的接口
getHouseData(){
    Promise.all([
        this.getUsersexData(),
        this.getNationData(),
    ]).then((res) => {
        let data = {
            address:this.optionData.address,
            buildingNo:this.optionData.buildingNo,
            houseId:this.optionData.houseId,
        }
        console.log(res)
        ApiFloor.house(data).then(result => {//接口
            result.data.forEach(item=>{
                item.open = false
            })
            this.itemList = result.data
        })
    }).catch(res=>{
        console.log("11");
    })
},
},

你可能感兴趣的:(多个请求执行完再执行下一个方法(vue Promise.all用法))