#多个异步请求同步返回后再执行下一步的解决方案($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 })
相关文章推荐
- 实现iOS中发起异步网络请求,需要等待其返回的数据才能执行下一步操作
- 前端踩坑小结:多个异步请求在同一个函数里面执行时的同步问题之promise的用法。
- iOS 信号量解决-网络异步请求的数据同步返回问题
- jquery ajax 同步异步的执行 return值不能取得的解决方案
- iOS之GET、POST:同步请求、异步请求
- Promise 异步执行的同步操作
- IOS 同步请求 异步请求 GET请求 POST请求
- IOS之同步请求、异步请求、GET请求、POST请求
- iOS网络编程之同步、异步、请求队列
- iOS之同步请求、异步请求、GET请求、POST请求
- Springmvc中 同步/异步请求参数的传递以及数据的返回
- IOS之同步请求、异步请求、GET请求、POST请求
- IOS之同步请求、异步请求、GET请求、POST请求
- es5实现promise,多异步请求返回数据
- IOS之同步请求、异步请求、GET请求、POST请求
- iOS-GCD学习之同步异步线程去执行串行操作
- ios在异步网络请求上实现同步逻辑
- 用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)
- IOS之同步请求、异步请求、GET请求、POST请求
- IOS之同步请求、异步请求、GET请求、POST请求