小编my-*_*unt的帖子

我正在尝试使用 async/await，但“await”不会等待。

我想要实现的是：

1. 获取数据
2. 显示数据
3. 处理数据

上述每一点都是一个单独的函数，只有在前一个函数完成后才应该运行。我不知道为什么显示数据（功能 2）不等待获取数据（功能 1）完成。

我曾多次尝试修改代码，但无法使其工作。我花了相当多的时间在 SO 上，查看类似的问题，我读过 MDN 和网上很多关于 async-await 的文章，但我只是不知道我在哪里犯了错误......

这是一个JSFiddle，但它没有“console.log”响应，所以我还将显示实际浏览器显示的内容。

代码：

超文本标记语言

  <main>

    <div class="d-flex justify-content-around">
        <div class="container row">
          <div class="col-12" id="displayNumbers" style="min-height: 300px; border: 1px solid black;"></div>
          <div class="col-12">
            <div class="btn" id="trigger" style="border: 1px solid red">
              Async / Await
            </div>
          </div>
        </div>
    </div>

  </main>  
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
    integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
    integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

JS

    var displayArea = document.getElementById("displayNumbers");

    async function fetchNumbers(){
      console.log("--fetchNumbers--")
      axios.get("http://numbersapi.com/random/year?json",
      ).then(function (response) {
        console.log("response …