JavaScript Promise 函数返回得太早

Question

我正在执行一堆 promise 函数，然后返回已解析的数组。但是，在返回数组时，它返回未定义。如果我使用 setInterval 在 3 秒后执行，数组返回值。

代码如下:

function getData() {
    var a = new Promise((resolve, reject) => {
        getDressData().then(function(result) {
            resolve(result);
            console.log('promise a resolved');
        });
    });

    var b = a.then(function(result) {
        var dressOwners = result.dressOwners;
        return new Promise((resolve, reject) => {
            getOwnerData(dressOwners).then(function(result) {
                resolve(result);
                console.log('promise b resolved');
            });
        });
    });

    return Promise.all([a, b])
    .then(function([resultA, resultB]) {
        if (resultA) {
            if (resultB) {
                console.log('promise all resolved');
                return resultA;
            }
        }
    });
}

返回数组:

function getDreses() {
    getData().then(function(result) {
        console.log('Returning promise...');
        console.log(result.dresses[1].colour);
    });
}

结果:

promise a resolved - main.js:679
promise b resolved - main.js:688
promise all resolved - main.js:697
Returning promise... - main.js:706
Uncaught (in promise) TypeError: Cannot read property 'colour' of undefined at main.js:707

但是，如果我在从数组中获取任何值之前设置了 3 秒的延迟，它就会起作用!

function getDreses() {
    getData().then(function(result) {
        var t = setInterval(() => {
            dresses = result.dresses;
            console.log(dresses.length);
            console.log(dresses[1].colour);
            clearInterval(t);
        }, 3000);
    });
}

结果:

promise a resolved - main.js:679
promise b resolved - main.js:688
promise all resolved - main.js:697
Returning promise... - main.js:706
4 - main.js:711
Blue - main.js:712

那么，我将如何等待直到数组有值而不是等待 3 秒的延迟？

编辑(可能是 getDressData() 解决得太快的问题):

function getDressData() {
    return new Promise((resolve, reject) => {
        var db = firebase.firestore();
        var dresses = [];
        var filters = [];
        var dressOwners = [];
        
        db.collection('dresses').orderBy("date", "desc")
        .get().then(function(doc) {       
            doc.docs.forEach(function(doc) {
                var item = doc.data();
                dresses.push({
                    'dressId' : doc.id,
                    'colour' : item.colour,
                    'credit' : item.credit,
                    'date' : item.date,
                    'description' : item.description,
                    'images' : item.images,
                    'owner' : item.owner,
                    'size' : item.size
                });

                if(filters.filter(x => x.size == item.size).length == 0) {
                    filters.push({"size" : item.size, "colours": [item.colour]});
                } 
                else {
                    var index = filters.findIndex((x => x.size == item.size));
                    
                    if (!filters[index].colours.filter(x => x.colours == item.colour).length > 0) {
                        filters[index].colours.push(item.colour);
                    }
                }

                if (dressOwners.indexOf(item.owner) === -1) {
                    dressOwners.push(item.owner);
                }
            });
        });

        resolve({
            "dresses" : dresses,
            "filters" : filters,
            "dressOwners" : dressOwners
        });
    });
}

Answer 1

这个片段确实是错误的。 (见代码中的注释)

function getDressData() {
    return new Promise((resolve, reject) => {
        var db = firebase.firestore();
        var dresses = [];
        var filters = [];
        var dressOwners = [];
        

        /*
         * this is a promise from your db
         */
        db.collection('dresses').orderBy("date", "desc")
        .get().then(function(doc) {       
            doc.docs.forEach(function(doc) {
                var item = doc.data();
                dresses.push({
                    'dressId' : doc.id,
                    'colour' : item.colour,
                    'credit' : item.credit,
                    'date' : item.date,
                    'description' : item.description,
                    'images' : item.images,
                    'owner' : item.owner,
                    'size' : item.size
                });

                if(filters.filter(x => x.size == item.size).length == 0) {
                    filters.push({"size" : item.size, "colours": [item.colour]});
                } 
                else {
                    var index = filters.findIndex((x => x.size == item.size));
                    
                    if (!filters[index].colours.filter(x => x.colours == item.colour).length > 0) {
                        filters[index].colours.push(item.colour);
                    }
                }

                if (dressOwners.indexOf(item.owner) === -1) {
                    dressOwners.push(item.owner);
                }
            });
        });

        /*
         * and you're resolving this function outside the db promise.
         * this will resolve before the db-promise finished
         */
        resolve({
            "dresses" : dresses,
            "filters" : filters,
            "dressOwners" : dressOwners
        });
    });
}

你可以尝试使用 async/await 也许它更容易理解。像这样:

// with async, this function will return a promise
// just use it like a promise: getDressData().then(/*...*/)

async function getDressData() {
        var db = firebase.firestore();            

        return await db.collection('dresses').orderBy("date", "desc")
        .get().then(function(doc) {  
            
            // process your db-response

            var dresses = [];
            var filters = [];
            var dressOwners = [];

            doc.docs.forEach(function(doc) {
                var item = doc.data();
                dresses.push({
                    'dressId' : doc.id,
                    'colour' : item.colour,
                    'credit' : item.credit,
                    'date' : item.date,
                    'description' : item.description,
                    'images' : item.images,
                    'owner' : item.owner,
                    'size' : item.size
                });

                if(filters.filter(x => x.size == item.size).length == 0) {
                    filters.push({"size" : item.size, "colours": [item.colour]});
                } 
                else {
                    var index = filters.findIndex((x => x.size == item.size));
                    
                    if (!filters[index].colours.filter(x => x.colours == item.colour).length > 0) {
                        filters[index].colours.push(item.colour);
                    }
                }

                if (dressOwners.indexOf(item.owner) === -1) {
                    dressOwners.push(item.owner);
                }

                return {
                   dresses,
                   filters,
                   dressOwners
                }
            });
        });
}