Async / Await 不“等待”

Question

我正在尝试使用 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 fetchNumbers data:")
        console.log(response.data);
        numbersData = response.data;
      })
    }

    async function displayNumbers(data){
      console.log("--displayNumbers--")
      console.log(data);
      for (let d in data){
        console.log(d);
        let div = document.createElement("div");
        div.textContent = data[d].toString();
        displayArea.appendChild(div);
      }
    }

    async function processNumbers(){
    console.log("--processNumbers--")
      let divs = displayArea.querySelectorAll("div");
      for (let div of divs){
        const reg = new RegExp('^[0-9]+$');
        if (reg.test(div.textContent)){
          div.style = "background-color: black; color: white;"
        }
      }
    }

    var numbersData = {};
    async function async_numbers(){
      try{
        await fetchNumbers();
        await displayNumbers(numbersData);
        await processNumbers();
      } catch(e){console.log("Error " + e)}
    }

    document.getElementById("trigger").addEventListener("click", async() => {
      async_numbers();
    })

控制台日志：

--fetchNumbers--
--displayNumbers--
Object {  }
--processNumbers--
response fetchNumbers data:
Object { date: "April 29", text: "1623 is the year that a fleet of 11 Dutch ships depart for the coast of Peru, seeking to seize Spanish treasure on April 29th.", number: 1623, found: true, type: "year" }

如您所见，--displayNumbers--无需等待response fetchNumbers data。

任何帮助/评论/解释将不胜感激。

PS：如果我可以以任何方式改进这个问题，请告诉我。

编辑

错误处理开启await axios.get

      try{ 
        const response = await axios.get("http://numbersapi.com/random/year?json")       
        console.log("response fetchNumbers data:")
        console.log(response.data);
        return response.data
      }catch(e){console.log("error handling")};

Answer 1

这里有几个问题：

• await你的 上缺少一个axios.get()。
• 当您已经在使用 async/await 时，使用.then()在某种程度上是一种反模式。
• 返回response.data比将其分配给全局更好。
• 看起来displayNumbers也不processNumbers需要是异步函数。

fetchNumbers()可以重写为：

async function fetchNumbers(){
  console.log("--fetchNumbers--")
  const response = await axios.get("http://numbersapi.com/random/year?json")
  console.log("response fetchNumbers data:")
  console.log(response.data);
  return response.data
}


async function async_numbers(){
  try{
    const numbersData = await fetchNumbers();
    // Remove async from both declarations. Not needed.
    displayNumbers(numbersData);
    processNumbers();
  } catch(e){console.log("Error " + e)}
}