Vue.js中方法中的作用域函数问题

问题描述 投票:0回答:2

我在Axios中的Promise里面有一个SetInterval。当我尝试在此SetInterval中执行函数时,我有以下错误:

    methods: {
    getJson() {
        axios.post(url, FormObject, config)
        .then(response => {
        var searchId = JSON.stringify(response.data.searchId)
        this.sendStatus(searchId)
        var status = setInterval(function(){ this.sendStatus(searchId) }, 
         30000);
        })
        .catch(err => (this.error = err))

      },

      sendStatus(searchId){},

     }

第一个调用(this.sendStatus(searchId))正常工作。但是,setInterval返回此错误:

未捕获的TypeError:this.sendStatus不是eval的函数

javascript vue.js setinterval
2个回答
3
投票

当您引入新功能时,您正在第二次调用中更改this的上下文。

如果您使用ES6,最简单的方法是使用箭头函数而不是函数关键字。

var status = setInterval(() => { this.sendStatus(searchId) }, 
  30000);
})

如果你不能使用ES6,你必须使用.bind()函数,这在this问题中有解释。更容易但更脏的是将this重新分配给局部变量。

var that = this;

然后在回调函数中使用that.sendStatus


1
投票

您需要在setInterval中使用箭头函数,如下所示:

setInterval(() => this.sendStatus(searchId))

这是一个resource解释更多的箭头功能和this

© www.soinside.com 2019 - 2024. All rights reserved.