如何使用 javascripts async/await 语法等待用户输入？

Question

编辑：注意：按照用户 Barmar 在下面的评论中的推荐，我将投票结束这个或多或少的意见/最佳实践导向问题。 我没有删除它，而是投票关闭它，因为已经有答案和富有成效的评论了。 我在https://codereview.stackexchange.com/questions/250351/how-to-await-user-input-with-javascripts-async-await-syntax-in-a-more-functional上转发了这个问题

我喜欢 async/await 和 Promises，因为我掌握了它们。 我可能做得过火了，但感觉应该有一种很好且可读的方式来利用 async/await 来更接近于类似功能性的编程风格的流程。

我希望不仅要使用 async/await 来等待 Web 资源返回，还要在等待时等待用户输入。

到目前为止，我有一些与这个缩短的演示类似的代码，我将一个一次性的 EventListener 包装到一个 Promise 中：

 //// MAIN /////// (async function(){ //...do some async await stuff here... fetching stuff from a server // let services = await fetch(...) for example let services = [{url:"x",label:"1"},{url:"y",label:"2"},{url:"z",label:"3"}] let service_chosen = await showServicesToUserAndAwaitInput(services); console.log("service_chosen:",service_chosen); // ... go on.... })() //// END MAIN ///// async function showServicesToUserAndAwaitInput(services){ if (services.length < 1){return null} let choice = null; let serviceList = document.querySelector("#serviceList"); // show list element serviceList.classList.remove("hidden") // create some elements for the user to interact with for (let service of services){ let button = document.createElement("BUTTON"); button.innerHTML = service.label; button.addEventListener("click",function(){ document.dispatchEvent( new CustomEvent('serviceChosen', { detail:service }) ) }); serviceList.appendChild(button); } // returns promise with one time only event listener return new Promise((resolve,reject)=>{ document.addEventListener("serviceChosen",function(e){ serviceList.classList.add("hidden") // hide again for we are done resolve(e.detail) },{ once: true }) }) }

 .hidden{ visibility: hidden }

 <div id="serviceList" class="hidden"> </div>

但是关于这种使用 EventListener 的一些事情让我感到困扰。 另外：我使用了一个总是会解决的承诺，这似乎也很奇怪。

从好的方面来说：我可以从上到下阅读代码，并且可以在 MAIN 中跟踪用户流程，而无需追踪事件、回调等。

然而，感觉就像我正在重新发明其他人可能已经规范的东西。 所以：

有没有更好的方法来实现这一目标？ 是否有以异步和/或 thenable 方式处理用户交互或其他 DOM 事件的最佳实践？

Answer 1

所以这里是一个没有 async/await 和自定义事件的代码示例。 只需调用适当的函数即可完成进度。 用户输入由单击事件处理，该事件侦听用户交互并触发适当的功能。

 //// MAIN /////// let services = [{url:"x",label:"1"},{url:"y",label:"2"},{url:"z",label:"3"}] showServicesToUserAndAwaitInput(services); //// END OF MAIN //// function showServicesToUserAndAwaitInput(services){ if (services.length < 1){return null} let choice = null; let serviceList = document.querySelector("#serviceList"); // show list element serviceList.classList.remove("hidden") // create some elements for the user to interact with for (let service of services){ let button = document.createElement("BUTTON"); button.innerHTML = service.label; button.addEventListener("click",function(){ chooseService(service); }); serviceList.appendChild(button); } function chooseService(service) { let service_chosen = service; console.log("service_chosen:",service_chosen); hideServices(); } function hideServices() { serviceList.classList.add("hidden") // hide again for we are done } }

 .hidden{ visibility: hidden }

 <div id="serviceList" class="hidden"> </div>