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

Question

我看过以下文章，它们都深入探讨了异步调用 return undefined。

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

Get data from fs.readFile

然而，这并没有回答我的问题。在我的示例中，我使用 async、await 和 .then。异步函数是 returning 一些东西，并填充数组，但它是数组的格式，以及处理我正在努力处理的数组的能力。

我正在使用以下代码用我的 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]); 我得到未定义。

我在创建这个数组时做错了什么？有没有更好，更清洁的方法来做到这一点我忽略了？谢谢。

Answer 1

首先，我想我建议重新访问 Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference 随着您对异步行为的理解的增长。我相信这是问题的根源（因此这对社区的某些成员来说感觉像是重复）。

为什么当你调用 console.log(initialClasses[0]) 时得到 undefined 将取决于你调用它的时间，如果你过早调用它并且误解了 async 的工作原理，我们会再次期望 undefined .

但是，与其深入探讨那些杂草，不如直击问题的根源：是否有更清洁的方法？是的！可能这里的误解来自于你构建它的方式。您可以大大简化它并获得相同的功能。

您可以在异步函数中调用以下内容

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

这将是首选方式，因为无论您想对来自该端点的响应做什么，基本上都是异步的。这样响应数据也不会是'nested'。

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

Javascript Array.push creating a nested array which I cannot access using the index

javascript

arrays

array-push

reactjs

mern