Question

我将来自GitHub API的数据加载到4个数组中。当我打印时，它显示未定义，但是在console.log中，它显示[]，并且当我扩展数据时就在那里。有没有一种方法可以在异步功能之外打印数组数据？

<script>
        var avatar = [];
        var names = [];
        var star = []
        var forks = [];
        async function pegaRepositorio(){
        const url = "https://api.github.com/search/repositories?q=language:Java&sort=stars&page=1"
        const response = await fetch(url)
        const resultado = await response.json()
        resultado.items.forEach(i=>{
        avatar.push(i.owner.avatar_url);
        names.push(i.name);
        star.push(i.stargazers_count);
        forks.push(i.forks_count);
        })

    }
    window.onload = pegaRepositorio;
    console.log(avatar[0]);
    document.body.innerHTML= avatar[3];
    </script>

Answer 1

pegaRepositorio有一个HTTP请求和一个异步函数。但这些行：

window.onload = pegaRepositorio;
console.log(avatar[0]);
document.body.innerHTML= avatar[3];

是同步的。 console.log等不会等待pegaRepositorio完成。这就是为什么得到undefined的原因，但是当您填充数组时，HTTP调用已经有了响应。

这是一个非常常见的情况，

您将创建一个占位符页面。例如，如果要获取列表，则创建一个类似于`
Loading List ...
然后，在获得HTTP响应之后，您可以呈现页面并显示信息。例如，使一个函数render向页面显示新值。然后从render函数中调用pegaRepositorio函数。

就像

async function pegaRepositorio(){
 ...get http..
 render(data);
}

render(data){
  document.getElementByID('someid').innerHTML = data.somekey
}

异步功能中未定义的数组打印

1 个答案: