javascript-等待所有的firebase调用完成与地图功能

前端之家收集整理的这篇文章主要介绍了javascript-等待所有的firebase调用完成与地图功能 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在获取用户数据,并且每个用户多次调用map函数.我想等到所有数据都被推送到数组,然后再处理数据.我尝试使用Promise.all(),但是没有用.
在继续之前,我如何等待地图功能完成?

不用说,在Promise.all()中打印时,数组user_list_temp为空.

 const phone_list_promise_1 = await arrWithKeys.map(async (users,i) => {
      return firebase.database().ref(`/users/${users}`)
          .on('value',snapshot => {
              user_list_temp.push(snapshot.val());
              console.log(snapshot.val());
            })
        }
  );

Promise.all(phone_list_promise_1).then( () => console.log(user_list_temp) )

我将代码更改为此,但仍然得到错误输出

Promise.all(arrWithKeys.map(async (users,i) => {
      const eventRef = db.ref(`users/${users}`);
      await eventRef.on('value',snapshot => {
        const value = snapshot.val();
        console.log(value);
        phone_user_list[0][users].name = value.name;
        phone_user_list[0][users].photo = value.photo;
      })
      console.log(phone_user_list[0]); 
      user_list_temp.push(phone_user_list[0]);
    }

  ));
    console.log(user_list_temp); //empty  array
}
最佳答案
如果我正确理解了您的问题,则可以考虑将代码修改为使用常规的for..of循环,每个用户都有一个嵌套的promise,可以解决用户的快照/值何时可用的问题,如下所示:

const user_list_temp = [];

/*
Use regular for..of loop to iterate values
*/
for(const user of arrWithKeys) {

    /*
    Use await on a new promise object for this user that
    resolves with snapshot value when value recieved for
    user
    */
    const user_list_item = await (new Promise((resolve) => {

        firebase.database()
        .ref(`/users/${users}`)
        .on('value',snapshot => {

            /*
            When value recieved,resolve the promise for
            this user with val()
            */    
            resolve(snapshot.val());
        });
    }));

    /*
    Add value for this user to the resulting user_list_item
    */
    user_list_temp.push(user_list_item);
}

console.log(user_list_temp);

代码假定将封闭函数定义为使用async关键字的异步方法,并在for..of循环中使用了await关键字.希望有帮助!

猜你在找的JavaScript相关文章