BUG记录：调用多个接口后再渲染，部分数据不显示

• 问题描述：需要调用两个接口后整合数据再渲染，出现el-table部分数据不渲染

正常显示：

例如：第一个接口返回角色信息

需要通过第一个接口的角色id来作为第二个接口的参数，获取角色对应的权限数据

• 原因：*异步加载*。两个接口都是异步加载的，那么在 el-table 渲染时可能存在一个接口还未返回数据的情况。使用 Promise 或 async/await 等方式来确保两个接口都返回数据后再渲染 el-table。

• 正确代码：

              //获取所有角色信息
              getAllRolePermission() {
                return new Promise((resolve,reject) => {
                   getAllRolePermission().then(res => {   
                        resolve(res);
                    }).catch(err => {
                      reject(err)
                    })
                  })
               
              },
              // 获取角色对应的权限
              getRolePermission(id) {
                return new Promise((resolve,reject) => {
                   getRolePermission(id).then(res => {
                    resolve(res)
                  }).catch(err => {
                    reject(err)
                  })        
                })        
              },
              //整合角色列表数据
              async getAllRoleList() {
                try{
                  const data1 = await this.getAllRolePermission()
                  const data2 = await Promise.all( 
                    data1.data.data.map(async (item,index) => {
                      const data2 = await this.getRolePermission(item.id)
                      return data2;
                    })
                  )
                  console.log(data2);//获得的是promise对象的数组集合
                  this.roleList = data1.data.data
                  data2.forEach((item,index) => {
                    if(item.data.data.length!=0)
                      this.roleList[index].permission = item.data.data;
                    else{
                      this.roleList[index].permission = []
                      this.roleList[index].permission[0] ={'instruction':'暂无'} 
                    }
                  })
                  console.log(this.roleList)
                }catch(error){
                  console.log("error")
                  console.log(error)
                }
              }
  

• console.log(data2);//获得的是promise对象的数组集合​​​​​​​如下

• 整合后角色信息（roleList）数据