javascript - 为什么传播运算符会丢失数据？

Question

我正在使用 Octokit 库处理 Github API。

我有一个函数列出了用户（用户名）的所有存储库。我在点击一个名为的按钮时调用了这个函数Fetch

为简单起见，我只渲染第一个存储库（使用索引 0）。

const list = []

  function fetchRepos() {
    octokit.repos
      .listForUser({
        username: 'abhinav-anshul',
      })
      .then((details) => list.push(details.data[0].name))

    console.log('List Array', list)

    const list2 = [...list]
    console.log(list2)
  }

正如我们在代码中看到的，我正在处理一个 Promise 链，并且在该 Promise 链中，我将 repo 结果推送到名为 list 的空数组中。

在 中console.log('List Array', list)，我能够正确获取“0th”回购名称，如下图所示：

但是当我尝试使用spread operator将列表数组传递给一个名为list2并执行的新数组时，console.log(list2)我得到以下信息：

为什么我在这里丢失了 repo 的名称？我在做一些概念上的错误吗？非常感谢任何帮助。

谢谢

标签： javascriptrestpromisejavascript-objectsoctokit-js

Answer 1

你then()是异步的，所以它在你的console.log(list2). 这就是为什么你list2的仍然是一个空数组。

我建议让你的功能async：

const list = [];

async function fetchRepos() {
    const details = await octokit.repos
        .listForUser({
            username: 'abhinav-anshul',
        });

    list.push(details.data[0].name);

    console.log('List Array', list);
}