Vue.js中如何使用Async/Await等待异步方法执行完毕后再运行后续代码

你之前的写法不生效的核心原因是getTreeView方法没有返回异步请求对应的Promise对象，哪怕你在外层包Promise.resolve()，拿到的也是undefined，await自然无法感知到异步操作的执行进度，不会产生等待效果。

步骤1：改造getTreeView方法，返回异步Promise #

两种改造方式二选一即可：

方式1：保留原有.then写法，只新增return #

methods: {
  setUpTree(){
    $("#equipment_tree").jstree("destroy");
    $('#equipment_tree').jstree({ 
      core : {
        data : this.tree,
        multiple: false,
        themes: { 
          dots: true
        }
      },
    });
    console.log("2. TREE SET UP")
  },
  getTreeView(){
    // 新增return，把fetch的整个Promise链返回
    return fetch("myurl /*just a URL */", 
      {
        method: 'GET',
      })
      .then((response) => response.json())
      .then((data) => {
        console.log('1. GOT DATA');
        this.tree = JSON.parse(data.tree);
        this.setUpTree();
        console.log('3. SET UP COMPLETE');
      })
  }
}

方式2：用async/await改写getTreeView，逻辑更清晰 #

async getTreeView(){
  const response = await fetch("myurl /*just a URL */", { method: 'GET' })
  const data = await response.json()
  console.log('1. GOT DATA');
  this.tree = JSON.parse(data.tree);
  this.setUpTree();
  console.log('3. SET UP COMPLETE');
}

步骤2：改造mounted钩子，用await等待异步执行 #

async mounted(){
  await this.getTreeView()
  // 后续代码会等getTreeView内所有逻辑执行完成后再运行
  console.log('4. TREE LOADED AND VISIBLE');
},

改造完成后控制台打印顺序就会符合预期：1. GOT DATA → 2. TREE SET UP → 3. SET UP COMPLETE → 4. TREE LOADED AND VISIBLE

• await只能在标记了async的函数内部使用，作用是暂停当前async函数的执行流程，等待后面的Promise状态变更后再继续执行后续代码
• await后面必须接Promise对象才能产生等待效果，如果接的是非Promise值，会被自动包装成立即resolve的Promise，不会有等待效果
• 如果你需要等待某个自定义方法内的异步操作执行完成，必须让这个方法把内部异步操作对应的Promise return出来，外层的await才能感知到
• 额外注意：Vue的生命周期钩子就算写成async函数，Vue也不会等待钩子内的异步操作完成再渲染组件，仅会控制钩子内部代码的执行顺序

内容的提问来源于stack exchange，提问作者Libra