firebase 的异步 Javascript 请求问题

如何解决firebase 的异步 Javascript 请求问题

我正在尝试生成一个包含来自 firebase 的信息的表格，但我不知道如何使其可靠。我制作了一个带有 setTimeout() 的版本以显示给我的同事，但如果列表更大或互联网连接不好，这就不可靠。我删除 setTimeout 时的问题是它返回一个空对象（liste），因为 forEach 不等待数据到来。这种问题有可靠和干净的解决方案吗？（我对 Promises 和 awaits 不是很熟悉）。

这是函数：

aFirebaseRequest.get()
    .then((data) => {
        var liste = [];
        listing.innerHTML = "";
        data.forEach((eleve) => {                                   <= HERE
            anotherFirebaseRequest1.get()
            .then((docEleve) => {
                if(docEleve.data().userCategory == "student") {
                    anotherFirebaseRequest2.get()
                    .then((docParent) => {
                        var tarifFormule = 0; var nomFormule = "";
                        if(docParent.docs.length != 0) {
                            anotherFirebaseRequest3.get()
                            .then((docFormule) => {
                                tarifFormule = docFormule.data().tarif
                                nomFormule = docParent.docs[0].data().formule;
                                if(liste.some((test) => test.id == eleve.data().idUser)) { 
                                    liste[liste.findindex((test) => test.id == eleve.data().idUser)].activity += 1
                                } else { liste.push({id : eleve.data().idUser,name: docEleve.data().firstName + ' ' + docEleve.data().lastName,activity: 1,nomFormule: nomFormule,tarifFormule: tarifFormule})};
                            }).catch((e) => console.log("Erreur : ",e))
                        } else {
                            tarifFormule = 0; nomFormule = "Aucune formule associé à cet élève";
                            if(liste.some((test) => test.id == eleve.data().idUser)) { 
                                liste[liste.findindex((test) => test.id == eleve.data().idUser)].activity += 1
                            } else { liste.push({id : eleve.data().idUser,tarifFormule: tarifFormule})};
                        }
                    }).catch((e) => console.log("Erreur : ",e))
                }}).catch((e) => console.log("Erreur : ",e))})
        return liste                                                     <= HERE
    }).then((liste) => {
        setTimeout(() => {liste.forEach((eleve) => {
            listing.innerHTML += `<tr><td style="padding-left: 0.1%; padding-right: 0.1%;">` + eleve.nomFormule + `</td><td style="padding-left: 0.1%; padding-right: 0.1%;">` + eleve.name + `</td><td style="padding-left: 0.1%; padding-right: 0.1%;"id="' + elem.matiere + 'Note1">` + eleve.activity + `</td><td style="padding-left: 0.1%; padding-right: 0.1%;">` + (eleve.tarifFormule * eleve.activity).toFixed(2) + ` €</td><td style="padding-left: 0.1%; padding-right: 0.1%;"><input style="text-align: center; width: 65%" type="number" name="" id="" min="0" max="100" placeholder="Réduction" step="5" oninput="this.value = !!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null"><label>&nbsp %</label></td><td style="padding-left: 0.1%; padding-right: 0.1%; display: none">` + eleve.id + `</td></tr>`; 
        })},1500)
    }).catch((e) => console.log("Erreur : ",e))

我用 Promise.all 和类似的东西尝试了很多版本，但我从来没有让它们运行良好......

如果你有什么解决方案我会采纳¯_(ツ)_/¯