H5W3
当前位置:H5W3 > 其他技术问题 > 正文

Vue中使用Promise获取数据this指向问题

假设methods中有个获取数据的方法getData
接收返回的数据参数为resultData
mounted里的写法

// 外面这个this
this.getData().then(response => {
  let result = response.data
// 里面这个this
  this.resultData = result
})

我的问题是 外面这个this 和 里面这个this 指向到底是否一样
调试的时候有时候then方法里面的thisundefined,有时候又是和外面的this指向一致,都是vuecomponent。而且即使里面的thisundefined,页面中也会显示resultData的值

箭头函数的内部的this是词法作用域,由上下文决定,那理论上里面的this外面的this指向应该是一致的?可是为什么又会有不同的情况发生呢?

如果您知道答案,期待您的解答~ 感谢。

回答:

this是函数产生的, 定义一个函数就会产生作用域和this.
你已经知道箭头函数不产生this, 所以你代码里的外面和里面this指向相同.

另外, 如果你说有时候this是undefined, 那么仔细检查下代码, 这个情况是不会发生的, 只有出现function foo() {}或者是es6的写法foo () {}才会产生新的this

回答:

用的是浏览器里面的断点? 浏览器里面打断点调试可能会出现这种现象,这种现象并不代表代码有问题。

回答:

按照你的描述,我想到一种可能性,有可能外层的this改变,造成了箭头函数里面的this跟着改变
你可以用下面的语句测试看看

const that=this
this.getData().then(response => {
  let result = response.data
  console.log(this,that)            // 看看当 this 为 undefined 时, that 是不是也为 undefined
  this.resultData = result
})

本文地址:H5W3 » Vue中使用Promise获取数据this指向问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址