vue中方法体内未严格按照执行顺序执行(自上而下,依次执行 ,有用)

注意:

VUE中的方法调用顺序是依次进行的,方法体内部也是依次执行的,
但是,两个方法体的执行顺序并不能严格控制,不一定一个方法执行完再执行另一个
下面来说一下涉及到axios请求时的执行顺序

我们要求的执行顺序是:
发送axios请求,更新数据至数据库–》重新获取数据库中的更新后的数据
我的测试:
如果按下面这种格式写,执行出来的结果是更新之前的,
因为post方法还没执行完,getUserList方法就开始执行了(没有严格的控制执行顺序)

//发送axios请求,更新数据至数据库
this.$http.post('/login/updateUserStatus', userinfo)
//重新获取数据库中的更新后的数据
this.getUserList()

在这里插入图片描述

下面是解决上面这种问题的方法(有两种)
方法一:使用async和await修饰符,使方法调用和执行是同步的

//发送axios请求,更新数据至数据库
await this.$http.post('/login/updateUserStatus', userinfo)
//重新获取数据库中的更新后的数据
this.getUserList()

在这里插入图片描述
方法二:在axios后的语句写在axios.then中,就能确保数据返回之后执行

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值