vue在一个方法执行完后执行另一个方法

近期做一个项目遇到一点问题 :前端请求后台接口数据 请求完成后 ,将请求到的数据进行赋值,但是在没有请求成功的时候就已经赋了值 ,后来就想到将请求方法执行完毕以后再进行赋值就查找资料,后来大部分解决都用promise就解决的

解决方法实例如下:

function2(){
    // 你的逻辑代码 
    return Promise.resolve(/* 这里是需要返回的数据*/)
}

function3(){
    // 你的逻辑代码 
    return Promise.resolve(/* 这里是需要返回的数据*/)
}

// 调用
function1(){
    this.function2().then(val => { 
        this.function3();
    });
}

但是我用如上方法测试了一下发现,还是没能实现  

接下来就只能用一个办法了:就是将请求后台接口的方法axios异步机制改装成同步机制进行实现

async/await 用法

     (注意:axios用法)

创建方法时:

async function BtnShow(menuId) {
  //按钮初始化
  for (let x in Btns) {
    Btns[x] = false;
  }
  
  var roleId = localStorage.getItem("roleId");

  let res = await axios
    .post(
      baseURL + "/*****/*****",
      qs.stringify({
        Role: roleId,
        Menu: menuId
      }),
      {}
    )
  var bdata = res.data;
  console.log(res.data);
  for (var i = 0; i < bdata.length; i++) {
    if (bdata[i].operationCode == "add") {
      Btns.add = true;
    }
    if (bdata[i].operationCode == "query") {
      Btns.query = true;
    }
  }
}

调用方法时:

async created(){
    var menuId = this.$route.query.menuId;
    await this.GLOBAL.BtnShow(menuId); 
  },

这样就可以解决我的问题了,,

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue可以通过使用axios库来请求接口并获取数据,可以使用Promise.all方法来等待两个接口返回数据成功后再请求详情接口。 首先,安装和引入axios库,可以使用以下命令进行安装: ``` npm install axios ``` 然后在需要请求接口的vue文件中,通过import引入axios库: ```javascript import axios from 'axios'; ``` 接下来,可以使用axios的get方法来发送接口请求: ```javascript axios.get(url1).then(response1 => { // 在接口1返回数据成功后执行的代码 axios.get(url2).then(response2 => { // 在接口2返回数据成功后执行的代码 axios.get(url3).then(response3 => { // 在请求详情接口返回数据成功后执行的代码 }).catch(error3 => { // 处理请求详情接口失败的情况 }); }).catch(error2 => { // 处理接口2请求失败的情况 }); }).catch(error1 => { // 处理接口1请求失败的情况 }); ``` 上述代码中,使用axios的get方法发送接口请求,并使用then方法处理接口返回的数据,catch方法来处理接口请求失败的情况。 在第一个请求接口返回数据成功后,再通过then方法继续请求第二个接口,然后在第二个接口返回数据成功后再继续请求详情接口。 最后可以根据需求,在请求详情接口返回数据成功后执行相应的代码,也可以通过catch方法来处理请求失败的情况。 通过以上方式,可以在两个接口返回数据成功后再请求详情接口,并对请求的结果进行相应的处理。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值