单击两次后获取值

Question

我在处理 angular 中的 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 值在单击按钮后仅显示在控制台中？

Answer 1

这部分：

loadInfo(): void {
    var test = this.web3Service.getInfo(this.address); 
    test.then((value) => {
        this.infoMapped = value;
    })
    console.log(this.infoMapped)
}

What needs to be fixed so that infoMapped value can be shown in the console after clicking the button only once?

为此，将 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>) 处的函数不会立即执行，而只会在 test 持有的 Promise 对象（由 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 分配另一个值 - 可能相同）。

单击两次后获取值

Getting value after clicking twice

asynchronous

undefined

angular-promise

angular

推理