#多个异步请求同步返回后再执行下一步的解决方案($axios与Promise)

多个异步请求同步返回后再执行下一步的解决方案($axios与Promise)

1.业务需求：

• vue项目，权限管理处理菜单权限树的匹配问题（后端返回一个菜单树与一个权限菜单ID的Array，此时需要对两者进行匹配，以在菜单树得到默认选中状态）

2.需求分析：

• 此时是两个axios请求，而在两次异步请求都完成之后再对两者的返回数据进行匹配处理（其实，先执行一个axios然后在它返回数据后再调用另外一个axios，然后再对两者得到的数据进行处理也可以，本文不讨论），这里我使用的方法是$axios.all与Promise.all

3.解决方案-$axios.all：

• 使用$axios.all方案，首先axios其实也是基于Promise进行封装的异步请求，他因为进一层封装所以使用写法会简洁一些，注意它必须要与$axios.spread搭配使用
• axios请求函数：

      // 获取菜单树(axios请求函数是进行封装了的)
      getMenuTreeData() {
        return getMenuTreeData()
      },
      // 获取角色菜单匹配array
      getRoleMenuData(sysRoleId) {
        let parm = {
          oid: sysRoleId,
        }
        return getRoleMenuData(parm)
      },

• 同步返回执行函数：

         this.$axios.all([that.getMenuTreeData(),that.getRoleMenuData(row.sysRoleId)]).then(that.$axios.spread((res1, res2) => {
          console.log(res1, res2)
          that.LimitData = res1.data.data
          that.permissionsList = res2.data.data.resources
        }))

4.解决方案-Promise.all

• Promise 是异步编程的解决方案，能够简化多层回调嵌套 ，它接收的参数是一个匿名函数,匿名函数也有二个参数resolve/reject（ resolve表示异步操作执行成功后的回调函数，并将异步操作的结果，作为参数传递出去； reject表示异步操作执行失败后的回调函数，并将异步操作的问题，作为参数传递出去； ）。
• axios请求函数：

	 // 获取菜单树
      getMenuTreeData() {
        return new Promise((res,rej)=> {
          res(getMenuTreeData())
        })
      },
      // 获取角色菜单匹配array
      getRoleMenuData(sysRoleId) {
        let parm = {
          oid: sysRoleId,
        }
        return new Promise((res,rej)=> {
          res(getRoleMenuData(parm))
        })
      },

• 同步返回执行函数

Promise.all([that.getMenuTreeData(), that.getRoleMenuData(row.sysRoleId)]).then(res=> {
          console.log(res)
          let res1 = res[0]
          let res2 = res[1]
          that.LimitData = res1.data.data
          that.permissionsList = res2.data.data.resources
        })