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)
  }
)



猜你喜欢

转载自blog.csdn.net/youyudexiaowangzi/article/details/80902183