使用Vue实现异步数据绑定

使用Vue实现异步数据绑定

// 定义一个异步数据获取函数，返回Promise对象
async function fetchData() {
  const data = await fetch('./data.json')
    .then(response => {
      if (response.ok) {
        return response.json()
      } else {
        throw new Error('Network response was not ok.')
      }
    })
    .catch(error => {
      console.error('There was a problem with the fetch operation:', error)
    })
  return data
}

// 在Vue实例中使用异步获取的数据
new Vue({
  el: '#app',
  data() {
    return {
      isLoading: true,  // 是否正在加载数据
      items: [],  // 获取的数据
    }
  },
  async created() {
    const data = await fetchData()
    this.items = data.items
    this.isLoading = false
  },
})