如何在我的 html 文件中调用异步 javascript function 在另一个文件中获取返回值？

Question

我有一个简单表格的 index.html 文件

更新

<form onSubmit=" App.estraiVincitore().then(value => { alert (value)}); return false;">
    <input type="submit" value="Get Winner">
    <input type="text" name="winner">    
 </form> 

我有一个带有异步 function 的 App.js 文件，可以正常工作以获取事件事务。

estraiVincitore: async() => {
  await App.vincitoreDelContest.estrazioneVincitore().then(function (value) {
      console.log(value.logs[0].args.username);
      return value.logs[0].args.username;   //returned value to show in my index.html
       
  });

如何从我的 JavaScript function 获取返回值并将其显示在我的 index.html 中？ 正确地，我想在我的文本区域中显示它。

非常感谢。

Answer 1

如何从我的 JavaScript function 获取返回值并将其显示在我的 index.html 中？

通过使用 estraiVincitore 在index.html文件中的estraiVincitore代码中返回的 promise。 async function 返回 promise； 后来，promise 被解决（用一个值实现，或者用“原因”[错误]拒绝）。

例如：

App.estraiVincitore()
.then(value => {
    document.querySelector("selector-for-your-text-area").value = value;
})
.catch(error => {
    // ...handle/report the error...
});

---

关于 Felix 的观点， async / await的目的是使使用带有简单逻辑流构造而不是回调的 Promise 成为可能。 所以：

estraiVincitore: async() => {
  const value = await App.vincitoreDelContest.estrazioneVincitore();
  console.log(value.logs[0].args.username);
  return value.logs[0].args.username;
}

这（基本上）相当于这个非async function：

estraiVincitore: () => {
  return App.vincitoreDelContest.estrazioneVincitore().then(value => {
      console.log(value.logs[0].args.username);
      return value.logs[0].args.username;
  });
}