Question

我在Vue实例上有两种方法；

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
   getId: function() {
     return axios.get('url')
     .then(response => response.data)
     .then(id => this.id = id)
     .catch(error => console.log(error))
   },

   foo: function() {
    console.log(this.id)
   }
 },
 mounted: function() {
 this.getId()
 this.foo()
 }
})

console.log()将null记录为值，因为它在响应getId()设法设置id值之前运行。我知道这是因为，当我使用Vue开发人员工具时，id是我期望的实际值，而不是null。

如何在运行getId()之前确保this.foo()已设置了值？

Answer 1

您可以做很多事情，我认为在JS中阅读Promises很有用，但是这里有一个简单的答案：

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
       getId: function(callback) {
         return axios.get('url')
         .then(response => response.data)
         .then((id) => { 
               this.id = id
               callback()
          })
         .catch(error => console.log(error))
       },

       foo: function() {
        console.log(this.id)
       }
  },
  mounted: function() {
     this.getId(() => {
        this.foo()
     })
  }
})

Answer 2

您可以使用JavaScript承诺来实现这一目标。最简单的方法是使用async / await语法..

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
   getId: function() {
     return axios.get('url')
     .then(response => response.data)
     .then(id => this.id = id)
     .catch(error => console.log(error))
   },

   foo: function() {
    console.log(this.id)
   }
 },
 mounted: async function() {
   await this.getId()
   this.foo()
 }
})

或者您可以采用老式方式。.

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
   getId: function() {
     return axios.get('url')
     .then(response => response.data)
     .then(id => this.id = id)
     .catch(error => console.log(error))
   },

   foo: function() {
    console.log(this.id)
   }
 },
 mounted: function() {
   this.getId().then(() => this.foo())
 }
})

Vue：如何等到一种方法完成后再触发另一种方法

2 个答案: