Using Promise to get data in Vue this points to the problem

suppose there is a method to get data in methods getData
the data parameter returned by receiving is resultData
mounted 

// this
this.getData().then(response => {
  let result = response.data
// this
  this.resultData = result
})

my question is whether the this outside points to the same as the this inside.
when debugging, sometimes the this in the then method is undefined , and sometimes it is consistent with the outside this, both vuecomponent . And even if the this is undefined , the value of resultData will be displayed on the page

. The this inside the

arrow function is lexical scope, which is determined by the context, so theoretically, the this in is consistent with the this outside ? But why does something different happen?

if you know the answer, look forward to your answer ~ thank you.

Javascript vue.js promise
Dec.16,2021

this is generated by a function. Defining a function produces scope and this.
you already know that arrow functions do not produce this, so the outer and inner this points to the same in your code.

in addition, if you say that sometimes this is undefined, then check the code carefully, this will not happen. Only when function foo () {} or foo () {} is written will a new this

be generated.

uses breakpoints in browsers? This phenomenon may occur in breaking point debugging in the browser, which does not mean that there is something wrong with the code.

according to your description, I can think of a possibility that the outer this changes, causing the this in the arrow function to change.
you can test it with the following statement

. 
const that=this
this.getData().then(response => {
  let result = response.data
  console.log(this,that)            //  this  undefined , that  undefined
  this.resultData = result
})

Previous: Wrote a hash report wrong. Why?

Next: WeChat Mini Programs real machine debugging error: APP-SERVICE-SDK:setStorageSync:fail Error

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu