Vue中mounted()无法获取series_interactions_daily变量数据

• 异步时序不匹配是最直接的原因
  HTTP请求本质是异步操作，代码执行不会等待网络请求返回结果再往下走。不管是最初把接口请求放在created钩子，还是调整后在mounted第一行调用fetchData，你在mounted里同步执行的console.log(this.series_interactions_daily)，都会在接口响应还没返回、变量赋值逻辑还没执行的阶段就跑通——这时候series_interactions_daily还是data里初始定义的空数组，自然拿不到有效数据。
  你调整代码后在mounted里调用fetchData仍然拿不到数据，本质是因为当前的fetchData没有把内部的Promise链return出去，调用方法发完请求后就立刻返回了，根本不等接口返回结果，自然执行到console.log的时候拿不到值。
  你提到页面能正常渲染变量内容，是因为后续接口响应回来、完成变量赋值后，Vue的响应式系统会自动触发视图更新展示最新数据，但这个发生时机远远晚于你写的console.log的执行时机。
• 代码存在this指向错误的隐藏bug
  你所有接口请求的.then()回调都使用了普通function声明，而非箭头函数。按照JavaScript的执行规则，这种写法下Promise回调内部的this不会指向Vue组件实例，非严格模式下会指向全局window对象。按这段代码的逻辑，你写的this.series_interactions_daily = 接口返回值实际上是给window挂了一个同名属性，根本没有修改Vue data里定义的响应式变量。你现在能正常渲染页面，大概率是本地实际运行的代码和贴出的示例存在差异（比如实际用了箭头函数），这个写法在部分场景下会直接导致页面数据为空，属于必须修正的问题。
• 图表和真实数据完全没有联动
  你初始化amCharts的时候绑定的是写死的dummydata，根本没有把series_interactions_daily的真实数据传给图表实例。哪怕后续接口拿到值，因为amCharts不是Vue原生组件，不会自动跟随响应式变量更新，图表永远只会展示模拟数据。

1. 统一修正所有Promise回调的this指向，把普通function替换成箭头函数，保证回调内部能正确操作Vue实例的属性和方法。
2. 把接口请求方法改造为可等待的Promise结构，等数据完全拿到之后再执行后续的打印、图表初始化逻辑：

   methods: {
     fetchData() {
       // 必须return整个Promise链，外部才能感知请求完成时机
       return this.$http.get('接口完整地址')
         .then(res => res.json())
         .then(data => {
           // 箭头函数this正确指向组件，直接赋值响应式变量
           this.campaign = data.campaign
           this.series_interactions_daily = data.interactions_per_day.stats.interaction.daily
           this.dateranges = data.dateranges
           this.total_interactions = data.totalInteractions
           this.average_daily_interactions = data.averagreDailyInteractions
         })
     }
   },
   async mounted() {
     // 等待接口数据拉取完成后再往下执行
     await this.fetchData()
     // 这一步打印就能拿到完整的接口返回数据
     console.log('series_interactions_daily数据：', this.series_interactions_daily)
     // 再执行图表初始化、绑定真实数据的逻辑
   }
   

3. 如果不想等待接口返回后再初始化图表，可以用Vue的watchAPI监听series_interactions_daily的变化，等数据更新后主动把数据同步给已经初始化好的amCharts实例，实现数据和图表的联动。

内容的提问来源于stack exchange，提问作者user3467896