1. 程式人生 > >vue中使用回撥函式,this呼叫無效

vue中使用回撥函式,this呼叫無效

let self = this //使用新變數替換this,以免this無效

//updateStudentInfoToServer是一個將本身部分資料非同步上傳的介面,

this.updateStudentInfoToServer(data, 

  function(res){
    console.log('return ok')
    console.log(res)
    // console.log('self')
    // console.log(self) //就是this
    // console.log('this')
    // console.log(this) //undefined

    self.handleCancelEdit()
  }, 

  function(error){

    console.log(error)

  }

)

updateStudentInfoToServer:function(data, networkOk, networkError){


  let postData = this.$qs.stringify({
          userId:localStorage.getItem('user_id'), 
          token:localStorage.getItem('token'), 

          userType:localStorage.getItem('user_type'), 

        //。。。。提交資料

  })


  this.axios.post('http://。。。。。url',
    postData
  ).then(res=>{
    console.log(' return : ')
    console.log(res)

    networkOk(res) //網路成功的回撥

  }).catch(error=>{
    console.log(error)

    networkError(error) //網路失敗的回撥
  }) 

  console.log('axios done')

}, 

提交網路資料是非同步呼叫,所以會先返回然後才執行成功、失敗的回撥。

為了模組化封裝,導致不能及時執行成功失敗操作,所以使用回撥的形式執行後續收尾工作

據說使用箭頭訪問函式可以訪問this

於是嘗試了一下,發現的確也可以

this.updateStudentInfoToServer(this, 
  (res=>{
    console.log('return ok')
    console.log(res)
    console.log('self')
    console.log(self)
    console.log('this')

    console.log(this)//this和self一樣

  }), 
  function(error){
    console.log(error)
  }
)