Vue组件挂载时如何让函数在异步操作完成后执行？

这个问题我太熟了！核心原因就是异步操作的执行顺序——你的getEvents()是异步请求，getAllEvents()调用后会立刻往下走执行eventSelection()，这时候请求还没返回，this.events自然还是空的或者初始值，导致eventSelection拿不到正确的数据。

下面给你两种常用的解决方案，都能完美解决这个问题：

方法一：在异步请求的then回调里触发eventSelection #

直接在getEvents()请求成功（或者失败，如果你想使用备用数据的话）的回调里调用eventSelection，这样就能确保this.events已经被正确赋值后，再执行事件选择逻辑。

修改后的代码如下：

mounted() {
  this.getAllEvents()
},
methods: {
  getAllEvents: function () {
    console.log("Cheguei aqui");
    getEvents()
      .then(function (res) {
        console.log("Entrei then")
        this.events = res.data
        // 请求成功后，立刻调用eventSelection
        this.eventSelection()
      }.bind(this))
      .catch(function (err){
        debugger;
        console.error('WeekSimulation, getEvents() ', err)
        this.events = ["Seu chefe o convida para um happy hour com os diretores no final do expediente. Ao mesmo tempo, você recebe uma mensagem de seu cônjuge lembrando da apresentação no colégio do seu filho. O que você faz?", "Você tem muito trabalho a fazer, porém o tempo com sua família anda escasso. No final do expediente você escolheria jantar com sua família ou fazer hora extra?", "Você acorda de manhã e seu filho não está se sentindo bem. Ao verificar sua agenda, lembra que tem uma reunião com um novo cliente em uma hora. Você leva seu filho ao médico ou vai para a reunião?", "Ao checar o seu celular durante uma reunião com os diretores de sua organização, nota que recebeu cinco ligações de seu cônjuge. Você continua na reunião, ou pede para atender o telefone?"]
        // 即使请求失败，也可以调用eventSelection使用备用数据
        this.eventSelection()
      }.bind(this))
  },
  eventSelection: function() {
    console.log("Funcao de selecao de evento")
    debugger;
    this.selectedEvent = _.shuffle(this.events)[0]
    console.log(this.selectedEvent)
  }
}

方法二：用async/await让代码按同步逻辑执行 #

把getAllEvents改成异步函数，然后在mounted里用await等待它执行完成，再调用eventSelection。这种写法更直观，代码逻辑和同步代码几乎一致，可读性更高。

修改后的代码如下：

async mounted() {
  // 等待getAllEvents的异步请求完成
  await this.getAllEvents()
  // 此时this.events已经有数据了，再执行eventSelection
  this.eventSelection()
},
methods: {
  async getAllEvents() {
    console.log("Cheguei aqui");
    try {
      // 等待getEvents请求返回
      const res = await getEvents()
      console.log("Entrei then")
      this.events = res.data
    } catch (err) {
      debugger;
      console.error('WeekSimulation, getEvents() ', err)
      this.events = ["Seu chefe o convida para um happy hour com os diretores no final do expediente. Ao mesmo tempo, você recebe uma mensagem de seu cônjuge lembrando da apresentação no colégio do seu filho. O que você faz?", "Você tem muito trabalho a fazer, porém o tempo com sua família anda escasso. No final do expediente você escolheria jantar com sua família ou fazer hora extra?", "Você acorda de manhã e seu filho não está se sentindo bem. Ao verificar sua agenda, lembra que tem uma reunião com um novo cliente em uma hora. Você leva seu filho ao médico ou vai para a reunião?", "Ao checar o seu celular durante uma reunião com os diretores de sua organização, nota que recebeu cinco ligações de seu cônjuge. Você continua na reunião, ou pede para atender o telefone?"]
    }
  },
  eventSelection: function() {
    console.log("Funcao de selecao de evento")
    debugger;
    this.selectedEvent = _.shuffle(this.events)[0]
    console.log(this.selectedEvent)
  }
}

两种方法都能解决你的问题，你可以根据自己的习惯选择：

• 方法一更适合简单的链式异步场景，代码改动最小；
• 方法二更适合复杂的异步流程，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Vini.g.fer