来看一段代码,思考第19行代码能否正常输出?:
async function login(account_id:string, password:string):Promise<string>{
let error_message = '';
await $.ajax({
url: '',
type: "post",
data: {
//.......
},// eslint-disable-next-line
success(resp:any) {
if(resp.error_message === 'success'){
this.token = resp.token;
this.status = resp.status;
}
},// eslint-disable-next-line
error(resp:any) {
error_message = "failed";
}
})
console.log("第19行",this.status)
if(error_message==='success') return error_message;
return error_message;
}
上述代码,存在一个常见的 JavaScript 异步问题:$.ajax 的回调函数中的this上下文会丢失。
在 success 和 error 回调函数中,this 不再指向 Vue 组件的实例,而是指向 $.ajax 的内部上下文。
因此,当你尝试访问 this.token 和 this.status 时,实际上访问的是 $.ajax 内部上下文中的 token 和 status,而不是 Vue 组件的状态。
这个问题可以通过使用箭头函数来解决。箭头函数不会改变 this 的指向,而是会继承外部函数的上下文。这意味着在箭头函数内部,this 将保持与外部函数相同的值。
success: (resp:any) => { // 使用箭头函数
// ......
},
error: (resp:any) => { // 使用箭头函数
// ......
}
标签:status,函数,success,resp,更新,失败,pinia,error,message
From: https://www.cnblogs.com/twinkler/p/18015583