javascript-在为下一个成员运行循环之前完成任务

前端之家收集整理的这篇文章主要介绍了javascript-在为下一个成员运行循环之前完成任务 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个网站的以下简单且简短的@L_301_0@代码

  1. db.collection("classes").doc(data.readGrades).get().then(function(doc) {
  2. if (doc.exists) {
  3. const data = doc.data();
  4. const members = data.members;
  5. members.forEach(el => {
  6. db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {
  7. querySnapshot.forEach(function(doc) {
  8. const data = doc.data();
  9. //some stuff
  10. });
  11. });
  12. })
  13. } else {
  14. console.log("No such document!");
  15. }
  16. }).catch(function(error) {
  17. console.log("Error getting document:",error);
  18. });

如您所见,我需要运行两个Firebase Firestore任务.重要的是首先要运行db.collection(“ classes”).doc(data.readGrades).get().then(function(doc){,并且对于每个成员,此任务都应遵循db.collection(“ users” ).doc(el).collection(“ grades”).get().then(function(querySnapshot){(注意:第二个任务由于变量而需要第一个).所以我的问题是我必须等待在下一个成员的循环可以继续之前完成第二项任务.

而这恰恰是我的问题:在为下一个成员运行循环之前如何完成第二个任务?

编辑:
我这样修改了Javascript代码

  1. db.collection("classes").doc(data.readGrades).get().then(function(doc) {
  2. if (doc.exists) {
  3. const data = doc.data();
  4. const members = data.members;
  5. members.reduce((chain,el) => {
  6. table_number++;
  7. const html = fillTemplate("grade_table" + table_number,member_name);
  8. document.getElementById("main_padding").insertAdjacentHTML('beforeend',html);
  9. return chain.then(() =>
  10. db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {
  11. querySnapshot.forEach(function(doc) {
  12. const data = doc.data();
  13. addToTable("grade_table" + table_number,doc.id,data.mdl,data.klu);
  14. });
  15. })
  16. )
  17. },Promise.resolve());
  18. } else {
  19. console.log("No such document!");
  20. }
  21. }).catch(function(error) {
  22. console.log("Error getting document:",error);
  23. });
  24. function fillTemplate(table_name,id) {
  25. console.log("ID OF TABLES " + table_name);
  26. return `
  27. <div class="noten_tabelle_permission" id="noten_tabelle_permission">
  28. <h1 id="member_name">${id}</h1>
  29. <table id="${table_name}" style="width:100%">
  30. <tr>
  31. <th>Fach</th>
  32. <th>mündlich</th>
  33. <th>Klausur</th>
  34. </tr>
  35. <!-- Make content with js code -->
  36. </table>
  37. </div>
  38. `;
  39. }
  40. function addToTable(table_name,subject,mdl,klu) {
  41. var subject_name = getSubjectByNumber(subject);
  42. var short_subject = getSubjectShortByNumber(subject);
  43. //Zeile erstellen
  44. console.log("addToTable " + table_name);
  45. var y = document.createElement([short_subject]);
  46. y.setAttribute("id",[short_subject]);
  47. document.getElementById([table_name]).appendChild(y);
  48. //Spalten in einer Zeile
  49. var y = document.createElement("TR");
  50. y.setAttribute("id",[short_subject]);
  51. //Spalten in einer Zeile
  52. var cE = document.createElement("TD");
  53. var tE = document.createTextNode([subject_name]);
  54. cE.appendChild(tE);
  55. y.appendChild(cE);
  56. var a = document.createElement("TD");
  57. var b = document.createTextNode([mdl]);
  58. a.appendChild(b);
  59. y.appendChild(a);
  60. var c = document.createElement("TD");
  61. var d = document.createTextNode([klu]);
  62. c.appendChild(d);
  63. y.appendChild(c);
  64. document.getElementById(table_name).appendChild(y);
  65. }

因此,诺言行得通.但是现在我有一个问题,就是诺言行不通.如您所见,我想为每个成员运行一个Firestore(Database)任务.因此,诺言应解雇每个新成员.但是,诺言最终会首先兑现.

背景知识:我从数据库的ArrayList中获取成员,对于每个单个成员,我都需要基于该成员获取特定的值.加载成员的值后,我将它们添加到表中,该表将填充上一个任务中的每个成员(如您所见).正如我所说的,诺言最终将兑现.因此,这些值将不会添加到成员的特定表中.它们将被添加到最后一个表中.

编辑2:
这是编辑后的代码

  1. members.reduce((chain,el) => {
  2. db.collection("users").doc(el).collection("user_data").doc("u").get().then(function (doc) {
  3. const data = doc.data();
  4. var member_name = data.name;
  5. table_number++;
  6. const html = fillTemplate("grade_table" + table_number,member_name);
  7. document.getElementById("main_padding").insertAdjacentHTML('beforeend',html);
  8. })
  9. return chain.then(((table_num) => {
  10. return db.collection("users").doc(el).collection("grades").get().then(function (querySnapshot) {
  11. querySnapshot.forEach(function (doc) {
  12. const data = doc.data();
  13. addToTable("grade_table" + table_num,data.klu);
  14. });
  15. })
  16. }).bind(null,table_number))
  17. },Promise.resolve());

所以这里的问题是,我获得member_name的任务异步运行,而另一部分则不然.因此,只有在加载了所有内容后,我才能运行整个任务.因为如您所见,我还需要member_name.因此,如何重新编码,以便仅加载所有内容(member_name / grades)时任务运行.

最佳答案
您可以将reduce而不是forEach用作初始值传递一个空的Promise,以便顺序处理成员:

  1. db.collection("classes").doc(data.readGrades).get().then(function(doc) {
  2. if (doc.exists) {
  3. const data = doc.data();
  4. const members = data.members;
  5. members.reduce((chain,el) => {
  6. return chain.then(() =>
  7. db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {
  8. querySnapshot.forEach(function(doc) {
  9. const data = doc.data();
  10. //some stuff
  11. });
  12. })
  13. )
  14. },error);
  15. });

更新#1:

考虑到更新的问题,数据可能会添加到最后一个表中,因为在答应解决期间,所有reduce迭代均已完成(因此table_name变量保留了最后一次迭代的值).您可以通过将table_name值绑定到在promise决议上调用的回调来解决它:

  1. members.reduce((chain,el) => {
  2. table_number++;
  3. const html = fillTemplate("grade_table" + table_number,doc.id);
  4. document.getElementById("main_padding").insertAdjacentHTML('beforeend',html);
  5. return chain.then(((table_num) => {
  6. return db.collection("users").doc(el).collection("grades").get().then(function (querySnapshot) {
  7. querySnapshot.forEach(function (doc) {
  8. const data = doc.data();
  9. addToTable("grade_table" + table_num,data.klu);
  10. });
  11. })
  12. }).bind(null,table_number))
  13. },Promise.resolve());

更新#2:
为了随后在单个reduce迭代中运行多个异步操作,请尝试使用Promise的then方法将它们链接起来:

  1. members.reduce((chain,el) => {
  2. return chain
  3. .then(() => db.collection("users").doc(el).collection("user_data").doc("u").get())
  4. .then(doc => {
  5. const data = doc.data();
  6. var member_name = data.name;
  7. table_number++;
  8. const html = fillTemplate("grade_table" + table_number,member_name);
  9. document.getElementById("main_padding").insertAdjacentHTML('beforeend',html);
  10. return table_number;
  11. })
  12. .then(table_num => {
  13. return db.collection("users").doc(el).collection("grades").get().then(function (querySnapshot) {
  14. querySnapshot.forEach(function (doc) {
  15. const data = doc.data();
  16. addToTable("grade_table" + table_num,data.klu);
  17. });
  18. })
  19. })
  20. },Promise.resolve());

猜你在找的JavaScript相关文章