在异步编程中停止 JavaScript 循环

Question

我知道javascript是异步的，如果我在.then之后做一个for循环，那么循环就会结束，然后对象承诺才会变得清晰，但我不能终生修复这个代码片段，也许有人可以帮助我。我的目标是循环并检查我从函数中获取的变量ans是否等于变量account，如果是，则打印出我从其他函数获得的信息。

loopforCetrs : function() {
var num;
var account = web3.currentProvider.selectedAddress;
App.contracts.StudentState.deployed().then(function (instance) {
return instance.showNumOfContracts();
}).then(function (numOfCert) {
num = numOfCert;
var wrapper = document.getElementById("myHTMLWrapper");
for (var i = 0; i < num; i++) {
App.ShowAddress(i).then(function (ans) {
if(ans == account) {
alert(ans+' Hello');
alert(account+' Hi')
App.ShowFName(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Name: ' + ans + ' </span><br/><br/>';
})
App.ShowLName(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Surname: ' + ans + ' </span><br/><br/>';
})
App.ShowInstName(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Institutions name: ' + ans + ' </span><br/><br/>';
})
App.ShowAddress(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Users address: ' + ans + ' </span><br/><br/>';
})
App.ShowCourseName(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Course name: ' + ans + ' </span><br/><br/>';
wrapper.innerHTML += '<span class="test"></span><br/><br/>';
})
}
})
}
})
},

编辑 1：这是我之前使用的代码，它完成了这项工作，但现在我想添加 1 件事并碰壁。

loopforCetrs : function() {
var num;
var account = web3.currentProvider.selectedAddress;
App.contracts.StudentState.deployed().then(function (instance) {
return instance.showNumOfContracts();
}).then(function (numOfCert) {
num = numOfCert;
var wrapper = document.getElementById("myHTMLWrapper");
for (var i = 0; i < num; i++) {
App.ShowFName(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Name: ' + ans + ' </span><br/><br/>';
})
App.ShowLName(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Surname: ' + ans + ' </span><br/><br/>';
})
App.ShowInstName(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Institutions name: ' + ans + ' </span><br/><br/>';
})
App.ShowAddress(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Users address: ' + ans + ' </span><br/><br/>';
})
App.ShowCourseName(i).then(function (ans) {
wrapper.innerHTML += '<span class="test">Course name: ' + ans + ' </span><br/><br/>';
wrapper.innerHTML += '<span class="test"></span><br/><br/>';
})
}
})
},

Answer 1

按照预期的方式使用承诺。坦率地说，当使用 ES6async/await和模板文字时，该代码看起来非常简单，这简直是噩梦：

loopforCetrs : async function() {
const account = web3.currentProvider.selectedAddress;
const numOfCert = await (await App.contracts.StudentState.deployed()).showNumOfContracts());
const wrapper = document.getElementById("myHTMLWrapper");
for (let i = 0; i < numOfCert; i++) {
if((await App.ShowAddress(i)) == account) {
//alert(ans+' Hello'); no more ans
alert(account+' Hi');
wrapper.innerHTML += `<span class="test">Name: ${await App.ShowFName(i)} </span><br/><br/>`;
wrapper.innerHTML += `<span class="test">Surname: ${await App.ShowLName(i)} </span><br/><br/>`;
wrapper.innerHTML += `<span class="test">Institutions name: ${await App.ShowInstName(i)} </span><br/><br/>`;
wrapper.innerHTML += `<span class="test">Users address: ${await App.ShowAddress(i)} </span><br/><br/>`;
wrapper.innerHTML += `<span class="test">Course name: ${await App.ShowCourseName(i)} </span><br/><br/>`;
wrapper.innerHTML += `<span class="test"></span><br/><br/>`;
}
}
}

这样，当回调解决时，您就不会遇到i是错误值的问题，因为一切都在等待中，并且保证在i更改值之前在该循环迭代中完全解决。

仍然有很多冗余，但我首选的解决方法是向App添加方法，这些方法返回的不仅仅是一条可怜的信息。有一个返回所有相关信息的，你可以减少另外 5 行冗余代码，大大提高性能和效率。