Question

我正在vuejs中使用axios调用restapi数据，我希望此数据每秒自动刷新以查看数字的任何变化。我可以看到数据，它可以正常工作，但刷新无法正常工作

我已将setinterval函数放在方法区域中，但它不会刷新任何数据。

import axios from 'axios';    
export default {    
  data () {    
    return {    
      btctrk: null,    
      bnnc: null,    
    }    
  },    
  computed: {    
          result1: function(){    
              return  this.btctrk[0].ask / this.btctrk[4].bid;    
          },    
          result2: function(){    
              return  this.btctrk[0].bid / this.btctrk[4].ask;    
          },    
          result3: function(){    
              return  (1-(this.bnnc[11].bidPrice / this.result1))*100;    
          },    
          result4: function(){    
              return (1-(this.result2 / this.bnnc[11].askPrice))*100;    
          },    
      },    
  mounted () {    
    axios    
      .get('https://www.api1.com/api/ticker')    
      .then(response => (this.btctrk = response.data))    
      .catch(error => console.log(error))    
    axios    
      .get('https://api.api2.com/api/v3/ticker/bookTicker')    
      .then(response => (this.bnnc = response.data))    
      .catch(error => console.log(error))    
  },    
  methods: {    
              startInterval: function () {    
                   setInterval(() => {    
                      this.result1;    
                      this.result2;    
                      this.result3;    
                      this.result4;    
                   }, 1000);    
          }    
  }    
}

Answer 1

仅当某些依赖项已更改时，才重新计算计算的属性，这意味着如果我们可以这样说的话，它们就有某种“缓存”。 See: Computed caching vs Methods

另一件事是，您在mount（）时正在运行Axios get调用，这意味着您的调用仅在组件安装后运行，而根本不刷新。 See: Lifecycle Diagram

我对您的问题的解决方案将是这样的：

  export default {
    data () {    
        return {    
        btctrk: null,    
        bnnc: null,    
        }    
    },    
    computed: {
        result1: function(){    
            return  this.btctrk[0].ask / this.btctrk[4].bid;    
        },    
        result2: function(){    
            return  this.btctrk[0].bid / this.btctrk[4].ask;    
        },    
        result3: function(){    
            return  (1-(this.bnnc[11].bidPrice / this.result1))*100;    
        },    
        result4: function(){    
            return (1-(this.result2 / this.bnnc[11].askPrice))*100;    
        },    
    },
    methods: {
        btcTrkAPICall: function () {
            axios    
                .get('https://www.api1.com/api/ticker')    
                .then(response => (this.btctrk = response.data))    
                .catch(error => console.log(error))    
        },
        bnncAPICall: function () {
            axios    
                .get('https://api.api2.com/api/v3/ticker/bookTicker')    
                .then(response => (this.bnnc = response.data))    
                .catch(error => console.log(error))    
        },
        intervalFetchData: function () {
            setInterval(() => {    
                this.btcTrkAPICall();
                this.bnncAPICall();
                }, 1000);    
        }
    },
    mounted () {
        // Run the functions once when mounted 
        this.btcTrkAPICall();
        this.bnncAPICall();
        // Run the intervalFetchData function once to set the interval time for later refresh
        this.intervalFetchData();
    }
}

我认为这是一个可行的解决方案，请随时进行测试。

如何在Vue.js中的axios自动刷新计算属性

1 个答案: