Question

Vue.component('test', {
  template: `some html`,
  data() {
    {
      return {
        somedata: 'hey, starting!'
      }
    }
  },
  methods: {
    fetchdata: function fetchdata() {
      fetch('http://localhost:5000/getmesome')
        .then(response => response.json()).then(data => this.somedata = data
        );
    }
  }, created() {
    this.fetchdata();
    console.log(this.somedata); //returns 'hey starting' not the fetched data.
  }
});

如代码注释所示，这不会使用获取的数据刷新属性。我该怎么办？

谢谢。

Answer 1

fetchdata()将在请求仍在进行中时立即返回，因为它是异步操作。 console.log(this.somedata)将在提取操作完成之前执行。

这是一个基本的异步误解；我建议您阅读异步JavaScript主题（承诺async和await等）。

这两种解决方案都可以使用：

methods: {
  fetchdata() {
    return fetch('http://localhost:5000/getmesome')
      .then(response => response.json())
      .then(data => this.somedata = data);
  }
},

created() {
  this.fetchdata()
    .then(() => console.log(this.somedata));
}

methods: {
  async fetchdata() {
    const res = await fetch('http://localhost:5000/getmesome');
    const data = await res.json();
    this.somedata = data;
  }
},

async created() {
  await this.fetchdata();
  console.log(this.somedata);
}

如何使用获取的数据更新Vue组件的属性

1 个答案: