[英]Async Await unusual behaviour
我试图了解JavaScript异步/等待功能。
所以我写了一个简短的代码来理解它,但这给了我异常的行为/结果。
var a = 10; function load_data(data) { setTimeout(() => { a = data }, 2000); } function print() { console.log(a); } async function init() { await load_data(40); print(); } init();
我希望记录的值是40,但是用async和await记录的值是10。
异步等待取决于Promises ,但是您并未在代码中的任何地方做出承诺。 结果,等待load_data
不会等待。
尝试使用Promise并在超时触发后解决:
function load_data(data){
return new Promise(resolve => setTimeout(() => {
a=data
resolve()
}, 2000))
}
另外,我们假设这只是为了学习异步/等待...否则,您应该以这种方式使用全局变量考虑所有常见建议。 一旦您的代码变大,这就是一团糟
var a = 10 function load_data(data){ return new Promise(resolve => setTimeout(() => { a=data resolve() }, 2000)) } function print(){ console.log(a) } async function init(){ await load_data(40); print(); } init();
异步/等待是用于处理承诺的语法,而不仅仅是任何异步行为。 为了使其与load_data
一起load_data
,该函数将需要返回解析为40的promise对象。
这应该可以满足您的期望:
var a = 10
function load_data(data){
return new Promise((resolve) => {
setTimeout(() => {
a=data;
resolve(a);
}, 2000)
});
}
function print(){
console.log(a)
}
async function init(){
await load_data(40);
print();
}
init();
在学习异步等待之前,了解诺言是必不可少的,因为这只是诺言的一种语法。
您应该在load_data()
返回一个Promise
。 实际上,您什么也不返回,因此代码不等待任何值被解析。 您应该执行以下操作:
function load_data(data){
return new Promise( resolve => {
setTimeout(() => {
a=data;
resolve(true);
}, 2000)
}
}
您应该创造承诺。 此外,最好不要使用全局变量,而应让promise解析为所需的值:
function load_data(data){ return new Promise(resolve => { setTimeout(() => { resolve(data); //<-- pass data to resolve }, 2000) }); } async function init(){ let data = await load_data(40); // <--- get the promised value console.log(data); } init();
请在执行打印功能之前为所设置的值设置承诺
var a = 10;
function load_data(data) {
return new Promise(resolve => {
a=data;
resolve('resolved');
});
}
async function init() {
var result = await load_data(40);
print();
}
function print(){
console.log(a)
}
init();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.