vue中使用回撥函式,this呼叫無效
阿新 • • 發佈:2018-12-31
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)
}
)