Vue.js中Axios调用API后计算属性无法自动刷新的问题

你现在的刷新功能无效，核心原因是你的定时器里根本没有重新发起API请求去获取最新数据——你只是在定时器里访问了计算属性result1到result4，但计算属性是依赖btctrk和bnnc这两个响应式数据的变化才会重新计算的。如果这两个数据源不更新，计算属性不会主动变化，页面自然也看不到新数据。

具体修改步骤： #

• 把API请求逻辑封装成独立方法，方便重复调用
• 在mounted中先初始化数据，再启动定时器
• 定时器里调用封装好的请求方法，真正更新数据源
• 组件销毁时清除定时器，避免内存泄漏

修改后的完整代码： #

import axios from 'axios';
export default {
  data () {
    return {
      btctrk: null,
      bnnc: null,
      refreshTimer: null // 存储定时器ID，用于后续清除
    }
  },
  computed: {
    result1: function(){
      // 增加空值判断，避免初始数据未加载时报错
      if (!this.btctrk) return 0;
      return this.btctrk[0].ask / this.btctrk[4].bid;
    },
    result2: function(){
      if (!this.btctrk) return 0;
      return this.btctrk[0].bid / this.btctrk[4].ask;
    },
    result3: function(){
      if (!this.bnnc || !this.btctrk) return 0;
      return (1-(this.bnnc[11].bidPrice / this.result1))*100;
    },
    result4: function(){
      if (!this.bnnc || !this.btctrk) return 0;
      return (1-(this.result2 / this.bnnc[11].askPrice))*100;
    },
  },
  mounted () {
    // 初始化获取数据
    this.fetchData();
    // 启动每秒刷新的定时器
    this.refreshTimer = setInterval(() => {
      this.fetchData();
    }, 1000);
  },
  beforeUnmount () {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer);
    }
  },
  methods: {
    // 封装统一的获取数据方法
    async fetchData() {
      try {
        // 用Promise.all同时发起两个请求，提升加载效率
        const [btcResponse, bnncResponse] = await Promise.all([
          axios.get('https://www.api1.com/api/ticker'),
          axios.get('https://api.api2.com/api/v3/ticker/bookTicker')
        ]);
        // 更新响应式数据，触发计算属性重新计算
        this.btctrk = btcResponse.data;
        this.bnnc = bnncResponse.data;
      } catch (error) {
        console.error('数据获取失败:', error);
      }
    }
  }
}

关键细节说明： #

• 使用Promise.all并行发起两个API请求，比串行请求更快，减少页面等待时间
• 在计算属性中增加空值判断，避免页面初始化阶段因btctrk或bnnc为null导致的报错
• 新增beforeUnmount钩子清除定时器，这是Vue组件开发的最佳实践，防止组件销毁后定时器仍在后台运行
• 将定时器ID存入data，确保能精准清除对应定时器

这样修改后，每秒都会重新请求最新的API数据，更新btctrk和bnnc后，计算属性会自动响应数据变化，页面就能实时刷新显示最新数值了。

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