javascript - 点击事件处理函数中的异步问题，无法解决第一次的无法展示数据，该如何解决？

Question

一个名为专题报告的下拉框，点击下拉框后给后端发一个special_report/special_report/selectList的get请求，将获取到的数据展示在下拉框，当我第一次点击下拉框时，没有数据，之后点击数据就展示出来了，百度是因为fetch发的是异步请求，于是在fetch中添加一个Promise，但是无效，用async/await依然无效，求大佬指点！！

第一次点击：

之后点击：

Answer 1

这是设计逻辑问题，点击之后不能马上拿到数据，却创建了html，肯定会显示空白（数据加载成功后能不能自动刷新下拉菜单，这个我不确定，你可以打开调试观察下第一次点击后html结构变没有，如果html里面结构变了，下拉菜单还是显示空白，那就是select组建就这么设计的，或者说浏览器对它的渲染逻辑就是这样的），建议改成：
1.在拿到数据后再创建html，即把创建html逻辑放到 await之后，再执行selected 操作
2.加个loading动画之类的

ps: 你看 vue react 的各种组建库里面的 select 这类单选/多选组建:
1.没有显示原生的html组建，而是用其他标签 div/span... 来代替显示，原生组建可以做数据传输，但是都隐藏显示了，
2.在原生标签里面嵌套了各种 div/span...，各种方法都绑定在这些 div/span 标签上
其实就是原生的 html 组建有各种弊端

Answer 2

出现这种情况的原因很简单，你绑定了下拉框的点击事件，如果你不点这个下拉框，自然就不会进行下拉框的数据初始化了，而初始化的过程又是一个异步过程，你自然没有办法控制什么时候数据能真正被传回来然后渲染在新建的DOM节点上。
如果你使用jquery,可以试着使用:

$(document).ready(function(){
  loadReports();
});

这样可以实现在页面的DOM文档树加载完成后就会执行一次拉取数据的操作 完成了下拉列表的初始化
如果你使用vue，可以在mounted钩子函数里写初始化的操作：

mounted: function() {
  loadReports();
}

记得去掉console.log,避免进页面的时候就会弹窗提示

Answer 3

改变对 HTML DOM操作的次序；不要在获取数据之前写入 HTML 内容；在拿到返回数据之后，再对 HTML 的内容做处理。

---

另外，还可以在页面 DOM 加载完成时，默认进行一次数据的初始化请求，生成一个下拉框的初始内容。