如何使用javascripts异步/等待语法等待用户输入？

编辑：注意：根据用户Barmar在下面评论中的建议，我将投票结束这个或多或少以观点/最佳实践为导向的问题。我没有删除它，但投票结束了，因为已经有了答案和富有成效的评论。我把这个问题转告了他

我喜欢async/Wait和承诺，因为我已经掌握了它们。我可能做得太过分了，但我觉得应该有一种好的、可读的方法来利用async/await，使它更接近于流式、函数式编程风格

我希望不必只使用async/await来等待web资源返回，还可以在等待时等待用户输入

到目前为止，我有一些类似于这个简短演示的代码，其中我将一次性EventListener包装成一个承诺：

///MAIN///////
（异步函数（）{
//…在这里执行一些异步等待操作…从服务器获取内容
//例如，让服务=等待获取（…）
let services=[{url:“x”，标签：“1”}，{url:“y”，标签：“2”}，{url:“z”，标签：“3”}]
let service_selected=等待ShowServicestoUserandWaitInput（服务）；
日志（“选择的服务：”，选择的服务）；
//……继续。。。。
})()
////端干管/////
异步函数showservicestouserandwaitinput（服务）{
if（services.length<1）{returnnull}
让choice=null；
让serviceList=document.querySelector（#serviceList”）；
//显示列表元素
serviceList.classList.remove（“隐藏”）
//创建一些供用户交互的元素
for（让服务中的服务）{
let button=document.createElement（“按钮”）；
button.innerHTML=service.label；
addEventListener（“单击”，函数（）{
document.dispatchEvent(
新建CustomEvent（'ServiceSelected'，{detail:service}）
)
});
serviceList.appendChild（按钮）；
}
//返回带有一次性事件侦听器的承诺
返回新承诺（（解决，拒绝）=>{
文件.添加的事件列表器（“服务选择”，功能（e）{
serviceList.classList.add（“hidden”）//再次隐藏，因为我们已经完成了
解决（如细节）
}，{once:true}）
})
}

。隐藏{
可见性：隐藏
}

---

下面是一个没有异步/等待和自定义事件的代码示例。只需调用适当的函数即可完成进度。用户输入由单击事件处理，该事件列出用户交互并触发相应的函数

///MAIN///////
let services=[{url:“x”，标签：“1”}，{url:“y”，标签：“2”}，{url:“z”，标签：“3”}]
showservicestouserandwaitinput（服务）；
////干管末端////
函数ShowServicesToUserAndWaitInput（服务）{
if（services.length<1）{returnnull}
让choice=null；
让serviceList=document.querySelector（#serviceList”）；
//显示列表元素
serviceList.classList.remove（“隐藏”）
//创建一些供用户交互的元素
for（让服务中的服务）{
let button=document.createElement（“按钮”）；
button.innerHTML=service.label；
addEventListener（“单击”，函数（）{
选择服务（服务）；
});
serviceList.appendChild（按钮）；
}
功能选择服务（服务）{
让服务_选择=服务；
日志（“选择的服务：”，选择的服务）；
hideServices（）；
}
函数hideServices（）{
serviceList.classList.add（“hidden”）//再次隐藏，因为我们已经完成了
}
}

。隐藏{
可见性：隐藏
}

如果这个问题写得不好或位置错误，我很乐意删除或修改它。但我很想知道否决的理由，这样我就可以避免犯同样的错误两次。我没有否决，但关于最佳实践的问题被认为是基于观点的，离题的。关于重新设计或重构工作代码的问题更适合于。我将投票表决，只是因为我不同意这种“基于意见”的政策。也就是说，我认为我从未见过有人使用

async/await

来处理外部启动的事件。它主要在程序启动一个异步完成的操作时使用，比如API请求。我建议改用RXJS来解决这个库中的小问题。你可以看到