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

【问题标题】：Problem with Scope Functions in Method from Vue.jsVue.js 方法中的作用域函数问题
【发布时间】：2018-09-13 18:26:03
【问题描述】：

我在 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 中的函数

【问题讨论】：

我不知道 vueJS，但你的匿名函数将有一个新值 this （几乎肯定会是全局对象），因此会出现错误。使用箭头函数而不是 function() {..} 声明（我看到您在此代码的其他地方使用它们）以保持 this 的值与周围范围内的值相同
你试过用箭头函数吗？
你必须检查this.sendStatus的“this”指的是什么...试试console.log(this)
How does the “this” keyword work?.
我用箭头函数替换了函数，它工作正常！感谢您的快速响应！

标签： javascript vue.js setinterval

【解决方案1】：

您正在第二次调用中更改this 的上下文，因为您正在引入一个新函数。

如果您使用的是 ES6，解决此问题的简单方法是使用箭头函数而不是 function 关键字。

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

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

var that = this;

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

【讨论】：

【解决方案2】：

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

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

这里是resource 解释更多箭头功能和this

【讨论】：