Javascript Array.push创建了一个嵌套的数组，但我无法使用索引访问。

Question

我看了以下几篇文章，都是关于异步调用返回未定义的深入探讨。

为什么我的变量在函数里面修改后没有变化？- 异步代码引用

从fs.readFile获取数据

然而，这并没有回答我的问题。在我的例子中，我使用的是 async和 await和 .then. async函数确实返回了一些东西，并填充了数组，然而我正在努力解决的是数组的格式和处理数组的能力。

我使用下面的代码从MongoDB数据库中填充一个数组的对象。

const initialClasses = [];

const getInitData = async () => {
  await axios.get('http://localhost:5000/classes/api/')
    .then(response => {
      initialClasses.push(response.data)
    })
    .catch(error => {
      console.log(error)
    });
  }
  getInitData();
  console.log(initialClasses);

然而，当我 console.log initialClasses 时，我得到了以下数组。

[]
0: (3) [{…}, {…}, {…}] // objects provided from the async call
length: 1
__proto__: Array(0)

当我试图访问这个数组时，使用 console.log(initialClasses[0]); 我得到的是undefined。

我在创建这个数组时做错了什么？有没有更好的、更简洁的方法，是我忽略的？谢谢。

Answer 1

首先我想我建议大家重新审视一下 为什么我在函数里面修改了我的变量之后，我的变量没有被修改？- 异步代码引用随着你对异步行为的理解不断加深。我相信这是问题的根源所在（因此，对社区的一些成员来说，这感觉像是重复的）。

为什么你会得到 undefined 当你打电话 console.log(initialClasses[0]) 将取决于你何时调用它，如果你太早调用它，我们会期望未定义，并误解了 async 作品。

但我们不谈那些杂草，而是要从根本上解决你的问题。有没有更干净的方法？有！有 可能这里的误解来自于你的结构方式。你可以简化很多，并得到同样的功能。

你可以在一个异步函数中调用下面的内容。

const response = await axios.get('http://localhost:5000/classes/api/');
let initialClasses = response.data;

这将是首选的方式，因为无论你想对该端点的响应做什么，基本上都是异步的。这样，响应数据也不会被 "嵌套"。