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

最新推荐文章于 2024-03-20 14:33:08 发布

原创最新推荐文章于 2024-03-20 14:33:08 发布 · 3w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue同步机制

vue 专栏收录该内容

55 篇文章

订阅专栏

博主在项目中遇到前端请求后台接口数据时，未请求成功就赋值的问题。尝试用promise解决未成功，最终决定将axios异步机制改装成同步机制，使用async/await实现，解决了该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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