vue方法里面调用了两个异步函数,因此会不执行的问题。

正好做到角色管理这部分。对角色列表增删改之后,都应该让当前列表刷新一下。同时因为角色会在用户管理里面用到,所以也需要对状态管理里面的内容进行刷新。

下图是删除接口和获得列表的方法,看红色部分就是写错位置了,应该把状态刷新的代码放到获取角色列表方法中,就是图中标红两处只要上面那一处的。

 可以看到我把获取全部角色的接口写到了状态中

 若在删除方法中同时执行了this.$store.dispatch("addRoles");和this.getRoles(); 那么不论写法的先后,都是状态中的方法先执行,而getRoles();不会执行,从而导致页面刷新出现问题。

Vue中,异步函数可以通过使用Promise对象、async/await等方式来实现同步执行的效果。Promise是一种用于处理异步操作的对象,它可以将异步函数执行结果以同步的方式返回。具体来说,可以按照以下步骤实现异步函数变同步执行的效果: 1. 使用Promise对象封装异步函数,将异步操作包裹在Promise的回调函数中。 2. 在封装的异步函数内部,通过resolve来返回异步操作的结果。 3. 在调用异步函数的地方,使用await关键字来等待异步函数执行完毕并获取结果。 4. 使用async关键字将包含异步函数调用的父函数标记为异步函数。 例如,假设我们有一个Vue组件,其中包含了两个异步函数testOne和testTwo。我们可以通过使用Promise和async/await来实现这两个函数的同步执行。 ``` methods: { testOne() { return new Promise((resolve, reject) => { setTimeout(function () { resolve('我是第一个函数的返回值'); }, 500); }); }, async testTwo(data) { console.log(data); console.log('得到data进行下一步的操作'); }, async resultFn() { let data = await this.testOne(); await this.testTwo(data); } } ``` 在上述代码中,testOne函数被封装成了返回Promise对象的形式,通过resolve将异步操作的结果返回。而testTwo函数使用了async关键字,表示它是一个异步函数。在resultFn函数中,我们使用了await关键字来等待testOne函数执行完毕并获取结果,然后再将结果传递给testTwo函数进行下一步的操作。这样就实现了异步函数的同步执行效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值