我在处理角度的promise函数时缺乏对异步操作的理解。所以基本上,我试图从promise方法中获取一个值并将其分配给组件中的全局变量。但是,当我单击一次按钮时,控制台中的值似乎为undefined
,并且再次单击它后会开始显示该值。
HTML:
<button type="submit" (click)="loadInfo(form)">Submit</button>
服务:
@Injectable()
export class Web3Service {
constructor...
getInfo(address: string): Promise<any> {
return this.TestBetting.deployed().then((instance) => {
return instance.getInfo.call(address);
})
.then((value) => {
var serialized = this.itemsService.getSerialized<IGetInfo>(value);
return this.mappingService.mapValueToGetInfo(serialized);
})
.catch((e) => {
console.log(e);
});
}
}
组件:
export class HomeComponent {
infoMapped: any;
constructor(private web3Service: Web3Service) {}
loadInfo(): void {
var test = this.web3Service.getInfo(this.address);
test.then((value) => {
this.infoMapped = value;
})
console.log(this.infoMapped)
}
}
需要修复哪些内容才能在仅按一次按钮后在控制台中显示infoMapped
值?
答案 0 :(得分:1)
这部分:
loadInfo(): void {
var test = this.web3Service.getInfo(this.address);
test.then((value) => {
this.infoMapped = value;
})
console.log(this.infoMapped)
}
需要修复哪些内容才能在单击按钮一次后在控制台中显示infoMapped值?
为此,请将console.log(this.infoMapped)
移至承诺中:
loadInfo(): void {
var test = this.web3Service.getInfo(this.address);
test.then((value) => {
this.infoMapped = value;
console.log(this.infoMapped)
});
}
这将解决,因为test.then(<THIS FUNCTION HERE>)
处的函数不会立即执行,但仅在Promise
保持test
的对象(由getInfo()
返回)解析时才会解决
它需要一点时间才能解决。也许毫秒,但仍然不会马上执行。
它不会执行,但代码仍在继续。当它继续时,它立即执行console.log(this.infoMapped)
。
现在,因为test.then(<THIS FUNCTION HERE>)
尚未执行(请记住:它不会立即执行,但在不久的将来会有一段时间),其代码(作业this.infoMapped = value;
当console.log(this.infoMapped)
运行时,尚未执行。
这就是您第一次登录undefined
的原因。
现在,在您第二次点击时,第一次点击的第一个test.then(<THIS FUNCTION HERE>)
就有足够的时间来执行。现在console.log(this.infoMapped)
将打印运行时更新的值。
(另请注意,test.then(<THIS FUNCTION HERE>)
将来会再次执行,因为第二次点击,但又为this.infoMapped
分配了另一个值 - 可能相同 - 。