在从 firebase 收集数据之前呈现网页 - NodeJS 和 EJS

Question

I have tried using async-await, .then and now promise. I am quite new in javascript development.

The code

indexRouter.get('/dashboard', checkSignIn, async(request, response) => {
    snapshot = await db.doc('users/accounts').get()
    sites = snapshot.data()['sites']
    const userId = request.session.userId
    snapshot = await db.doc(`users/${userId}`).get()
    var linkedSites = snapshot.data()['linked sites']
    let getDs = new Promise((resolve,reject)=>{
        console.log("1")
            linkedSites.forEach((site) =>{
                console.log("2")
            db.doc(`users/${userId}`).collection(site).get()
            .then((snapshot)=>{
                console.log("3")
                snapshot.forEach((doc) => {
                console.log("4")
                console.log(doc.id)
                emailId = doc.id
                keys = doc.data()['keys']
                var passwordEncrypt = doc.data()['password']
                password = cryptoJS.....
                details.push({site:{'email': emailId, 'password': password, 'keys': keys}})
                })
            })
        })
        console.log("5")
        console.log(details)
        resolve(details)
        }

    );

    getDs.then((details)=>{
        console.log("rendering")
        response.render('dashboard', {'details':details, 'linkedSites': linkedSites, 'sites': sites})
    })
}

I am getting the response

1
2
2
5
[]
rendering
error: ...details not found in ejs
3
4
rsp121@gmail.com
3
4
test@gmail.com

According to the output, it seems like db.doc line after console.log(2) is getting executed after a certain time and resolve(details) is sent before.

---

Found a solution to the problem:

indexRouter.get('/dashboard', checkSignIn, async(request, response) => {
    snapshot = await db.doc('users/accounts').get()
    sites = snapshot.data()['sites']
    const userId = request.session.userId
    snapshot = await db.doc(`users/${userId}`).get()
    var linkedSites = snapshot.data()['linked sites']
    if(linkedSites){
        const getSnapshot = (site) => {
            return new Promise(resolve => {
                db.doc(`users/${userId}`).collection(site).get()
                .then((snapshot) =>{
                    snapshot.forEach((doc) =>{
                        emailId = doc.id
                        keys = doc.data()['keys']
                        var passwordEncrypt = doc.data()['password']
                        password = cryptoJS
                        details[site] = {'email': emailId, 'password': password, 'keys': keys}
                        resolve(true)
                    })
                })
            })
        }

        Promise.all(linkedSites.map(getSnapshot)).then(()=>{
            console.log(linkedSites)
            response.set('Cache-Control', 'no-store, no-cache, must-revalidate, private')
            response.render('dashboard', {'details':details, 'linkedSites': linkedSites, 'sites': sites})
        })
    }

Answer 1

The problem is your promise resolved before the db.doc is resolved, and as your db.doc promise is inside a loop. So, you should be using the promise.all The below code should work for you.

indexRouter.get("/dashboard", checkSignIn, async (request, response) => {
  snapshot = await db.doc("users/accounts").get();
  sites = snapshot.data()["sites"];
  const userId = request.session.userId;
  snapshot = await db.doc(`users/${userId}`).get();
  var linkedSites = snapshot.data()["linked sites"];
  let getDs = new Promise((resolve, reject) => {
    const promises = [];
    console.log("1");
    linkedSites.forEach((site) => {
      console.log("2");
      promises.push(
        new Promise((internalResolve) => {
          db.doc(`users/${userId}`)
            .collection(site)
            .get()
            .then((snapshot) => {
              console.log("3");
              snapshot.forEach((doc) => {
                console.log("4");
                console.log(doc.id);
                emailId = doc.id;
                keys = doc.data()["keys"];
                var passwordEncrypt = doc.data()["password"];
                password = cryptoJS;
                details.push({
                  site: {
                    email: emailId,
                    password: password,
                    keys: keys,
                  },
                });
                internalResolve();
              });
            });
        })
      );
    });
    Promise.all(promises).then(() => {
      console.log("5");
      console.log(details);
      resolve(details);
    });
  });
  getDs.then((details) => {
    console.log("rendering");
    return response.render("dashboard", {
      details: details,
      linkedSites: linkedSites,
      sites: sites,
    });
  });
});

More cleaner with async/await .

indexRouter.get("/dashboard", checkSignIn, async (request, response) => {
  snapshot = await db.doc("users/accounts").get();
  sites = snapshot.data()["sites"];
  const userId = request.session.userId;
  snapshot = await db.doc(`users/${userId}`).get();
  var linkedSites = snapshot.data()["linked sites"];
  console.log("1");
  linkedSites.forEach(async (site) => {
    console.log("2");
    const snapshot = await db.doc(`users/${userId}`).collection(site).get();
    console.log("3");
    snapshot.forEach((doc) => {
      console.log("4");
      console.log(doc.id);
      emailId = doc.id;
      keys = doc.data()["keys"];
      var passwordEncrypt = doc.data()["password"];
      password = cryptoJS;
      details.push({
        site: {
          email: emailId,
          password: password,
          keys: keys,
        },
      });
    });
  });
  console.log("rendering");
  return response.render("dashboard", {
    details: details,
    linkedSites: linkedSites,
    sites: sites,
  });
});

Answer 2

This is your code corrected, optimized and using last especifications of ECMA Script, the error is as the other comment said you are no waiting for the result of promises inside your "new Promise.." declaration. Dont foget to use try/catch inside async functions if you have not a top error handler.

The optimization is in firsts snapshot variables, this way you are getting data in parallel instead secuantially.

indexRouter.get('/dashboard', checkSignIn, async (request, response) => {
try {
    let details = [];
    const userId = request.session.userId
    let [snapshot1, snapshot2] = await Promise.all([db.doc('users/accounts').get(), await db.doc(`users/${userId}`).get()])
    let sites = snapshot1.data()['sites']
    var linkedSites = snapshot2.data()['linked sites'];

    await Promise.all(
        linkedSites.map((site) =>
            db.doc(`users/${userId}`).collection(site).get()
                .then((snapshot) => {
                    snapshot.forEach((doc) => {
                        emailId = doc.id
                        keys = doc.data()['keys']
                        var passwordEncrypt = doc.data()['password']
                        password = cryptoJS
                        details.push({ site: { 'email': emailId, 'password': password, 'keys': keys } })
                    })
                })
        )
    )

    response.render('dashboard', { 'details': details, 'linkedSites': linkedSites, 'sites': sites })
} catch (e) {
    //Render error you want
}})

linkedSites.map.... return an array of Promises that in the end are wrapped inside Promise.all and Promise.all wait until all promises are fullfilled or one of them is rejected in this last case your code goes to catch without reach the line response.render inside the try. You can avoid this catching locally the error of each promise in the map using

 .then((snapshot) => {
 ...
}).catch(e=> { /*Do something with the rror*/})