您的位置:首页 > 移动开发 > IOS开发

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

2020-07-14 05:12 2621 查看

多个异步请求同步返回后再执行下一步的解决方案($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
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: