在Javascript和Vue.JS中的变量作用域

Question

我是新的javascript，并发现一些问题与对象/变量的范围，我需要你的帮助来指出为什么我的{endtoken:this。token}为空，而console.log({rawToken:e.data})为不?

我发现与Python相比，在JS中理解变量位的范围令人困惑，是否有易于阅读的链接来理解这个概念?

我的目标是在创建组件时从windows父API和Rest API获取所有数据。

var obj = {
token: '',
init: {},
user: {}, 
objInfo: {}
}; 
var app = new Vue({
el: '#app-4',
data: obj, 
created: function(){
postRobot
.send(window.parent, "loadingCall", false, {domain: domain})
.catch(function (e) {
console.log(e);
});
postRobot
.send(window.parent, "tokenCall", {}, { domain: domain })
.then(function (e) {
this.token = e.data; // token 
console.log({rawToken:e.data});
console.log({token:this.token});
})
.catch(function (e) {
console.log(e);
});
postRobot
.send(window.parent, "initCall", {}, { domain: domain })
.then((e)=>{
this.init = e.data;
console.log({rawInit:e.data});
console.log({init:this.init});
})
.catch((e)=>{
console.log(e.data);
});
console.log({endtoken:this.token}); // blank token
console.log({endinit:this.init}); // blank object
}
});

问候,

Harris, 10年级GPS雅加达

Answer 1

这是由于javascript的异步特性造成的。你可以在这里读到一篇关于它的好文章

在你的代码中发生的是你的最后一个console.log语句(文件中的最后一个)在then部分执行之前得到执行。

结果是:

1. 你正在发送一个请求通过你的postRobot，(你不知道什么时候请求将返回一个答案)
2. 你正在"跳过"运行then和catch部分，并运行"最后"部分。console.logs
3. 你得到你的响应，只有当响应回来，then部分被执行

基本上是在数据到达之前记录数据并将其设置在这些变量中因此日志的输出是数据的初始状态

这篇文章和你的有类似的情况