javascript - 在使用 Promise.all() forEach 渲染 NodeJS 页面之前等待 Firebase 数据加载

Question

我正在尝试创建一个从 Firebase 加载多个数据集的页面，然后将它们传递到 NodeJS 呈现的页面。如果能帮助我确保在 forEach 迭代之后发生这种情况，我将不胜感激；也就是说，我不确定如何让 Firebase forEach 迭代成为我 promise 的一部分。

非常感谢!

router.get('/', function(req, res, next) {

    var getBrands = brandRef.once('value').then(function(snapshot){
        var brands = [];

        snapshot.forEach(function(childSnapshot){
            console.log(childSnapshot.val()['name']);
            brands.push({'name' : childSnapshot.val()['name'] });
        });

        return brands;
    });
    var getStores = storeRef.once('value').then(function(snapshot){
        var stores = [];

        snapshot.forEach(function(childSnapshot){
            stores.push({'name' : childSnapshot.val()['name'] });
        });

        return stores;
    });
    var getProducts = productRef.once('value').then(function(snapshot){
        var products = [];

        snapshot.forEach(function(childSnapshot){
            products.push({'name' : childSnapshot.val()['name'] });
        });

        return products;
    });

    console.log(brands, stores, products);
    Promise.all([getBrands, getStores, getProducts]).then(function(results){

        res.render('index', { title: 'MStore Demo Portal', stores: results[0], brands: results[1], products: results[2] });
    });
});

Answer 1

你的代码看起来 99% OK

router.get('/', function(req, res, next) {
    var getBrands = ...;
    var getStores = ...;
    var getProducts = ...;

到目前为止一切顺利(甚至懒得复制代码，因为它是正确的

    console.log(brands, stores, products);

品牌、商店和产品在 .then 回调中声明，因此无论如何，此时它们始终未定义

    Promise.all([getBrands, getStores, getProducts]).then(function(results){

        res.render('index', { title: 'MStore Demo Portal', stores: results[0], brands: results[1], products: results[2] });
    });
});

上面唯一的“问题”是，由于您在 Promsie.all 中订购了 getBrands、getStores、getProducts，结果将是 brands, stores, products

但是，您似乎认为(基于索引)结果将是 stores, brands, products - 在代码中交换索引 0 和 1，或者调用

Promise.all([getStores, getBrands, getProducts]).then

提示，如果您使用的是足够新的 node.js，您可以执行以下操作

Promise.all([getStores, getBrands, getProducts]).then(([stores, brands, products]) =>
    res.render('index', { title: 'MStore Demo Portal', stores, brands, products })
);