Question

我需要经常调用一个函数，因此我想经常更新数据，因此我需要调用该方法，即使用vue js。

我想知道vue js在哪个属性中找到它的方式，谢谢，我将调查所有评论

我需要每30秒调用一次“ listar（）”方法

<script>
  export default {
    methods: {

            listar(){
            let me=this;
                me.mesas=[];
                axios.get('api/mesas/ListarTodos').then(function(response){
                    //console.log(response);
                    me.mesas=response.data;
                      me.loading=false;
                }).catch(function(error){
                    console.log(error);
                });



        },
}
</script>

这对我不起作用

setTimeout(() => {
         //
}, 300)

升级1

此代码实际上对我有用，但问题是-因为它是一个单页应用程序，所以切换到另一页后它将继续运行。

我正在使用clearInterval（），但是它不起作用，即使我更改页面（组件），该方法也仍在运行。仅在我第一次进入另一个页面时清除，然后再清除

Ref-> https://renatello.com/vue-js-polling-using-setinterval/

<script>
import axios from 'axios'
  export default {

data () {
      return {
        polling: null,

       },
methods: {

        listar(){
                let me=this;
                    me.mesas=[];
                    axios.get('api/mesas/ListarTodos').then(function(response){
                        //console.log(response);
                        me.mesas=response.data;
                          me.loading=false;
                    }).catch(function(error){
                        console.log(error);
                    });



     pollData () {
      this.polling = setInterval(() => {

         this.listar();
       }, 3000) },

                },


 created () {
      this.pollData()

    },

 beforeDestroy () {
         clearInterval(this.polling)
    },
  }
</script>

Answer 1

就像ittus所说的那样，您应该使用setInterval：

setInterval(() => {
    // call listen()
}, 30 * 1000);

setInterval返回一个可以传递给clearInterval的对象，以停止调用listen。

但是，如果要考虑请求的时间，也可以在（承诺）请求结束时在.finally块中使用setTimeout：

axios.get('api/mesas/ListarTodos').then(function(response){
    //console.log(response);
    me.mesas=response.data;
    me.loading=false;
}).catch(function(error){
    console.log(error);
}).finally(function(){
    setTimeout(/*call listen in a function*/, 30 * 1000);
});

无论如何，它与vuejs没有多大关系

经常调用vue js的方法

1 个答案: