javascript - Javascript为什么返回空数组

Question

我知道 Js 是异步的，但是如何防止我的回调返回一个空数组？这是我的代码：

function getPicturesArray(nbr,callback){
    var avatarArr = [];
    for(var i =0; i<nbr ; ++i){
        request("https://randomuser.me/api/",{json: true},(err,response,body)=> {
            avatarArr.push(body.results[0].picture.large);
        });
    }
    callback(avatarArr);
}

getPicturesArray(12, (e)=>{
    console.log(e);
});

console.log('here');

最重要的是： [] 这里

标签： javascriptarraysajaxrequest

Answer 1

不要使用回调。使用 Promises 或 async/await。

  getUserPic = async () => {
    const url = 'https://randomuser.me/api/'
    const response = await fetch(url)
    const users = await response.json()

    return users.results[0].picture.large
  }
  ;(async () => {
    const userAvatars = []
    for (let i = 0; i < 12; i++) {
      userAvatars.push(await getUserPic())
    }
    console.log(userAvatars)
  })()

也尝试使用这个。在这种情况下，我建议您使用 Set 而不是 Array 来排除重复项。

  getUserPic = async () => {
    const url = 'https://randomuser.me/api/'
    const response = await fetch(url)
    const users = await response.json()

    return users.results[0].picture.large
  }

  getMultipleUserPics = async limit => {
    const userAvatars = new Set()
    while (userAvatars.size != limit) {
      userAvatars.add(await getUserPic())
    }

    return userAvatars
  }

  ;(async () => {
    const userPics = await getMultipleUserPics(5)
    console.log(userPics)
  })()