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');

sout是： [] 在这里

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)
  })()

Answer 2

出于演示目的，我正在使用公共服务来模拟呼叫，但关键是HTTP请求的异步性质。

当您调用callback(avatarArr);时，您的for循环已完成，但您发送的请求（在本例中为12）尚未完成，因此avatarArr尚无任何项目。

在async之前的function getPicturesArray和await之前的fetch的通知

await告诉执行 wait 以完成fetch调用

您必须签出async / await。

async function getPicturesArray(nbr,callback){
    var avatarArr = [];
    console.log('loading...');
    for(var i =0; i<nbr ; ++i){
      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i+1}`);
      const json = await response.json();
      avatarArr.push(json.title);  
    }
    console.log('done loading...');
    callback(avatarArr);
}

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

console.log('see how this is executed before done loading...');

Javascript为什么返回空数组

2 个答案: