vue 获取const 获取API数据

Question

测试数据是这样的：

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkedCities: ['上海', '北京'],
        cities: cityOptions
      };
    }
  };
</script>

需要结果：
想通过const cityOptions = []这样的方式获取API数据，但不知道怎样实现？

Answer 1

正如楼上说的，一般获取后台返回的数据都是异步的，所以需要异步去设置data,你可能想用同步的写法去定义数据，这对于人类阅读是比较友好的，但很明显这样对性能和体验不好，因为这意味着你必须等待请求返回才能去做组件的初始化及之后的一系列事情，所以通常都是在vue的created或者mounted生命周期中异步获取数据然后设置，如果你想让代码看起来像是同步比较益于阅读的话可以用async。
比如像这样

export default {
  data() {
    return {
      cities: [],
    }
  },
  created() {
   this.init();
  },
  methods: {
    async init() {
      const cities = await this.requestCities();
      this.cities = cities;
    },
    requestCities() {
      return new Promise(resolve => {
        setTimeout(() => resolve(['上海','北京','深圳']), 1000);
      })
    },
  },
}

Answer 2

这个一般是用异步接口里的回调来处理对cityOptions进行赋值，除非你用同步的接口请求
建议你先了解一下什么是异步再回来处理这个问题