从 Promise 列表中获取数据

Question

yourCarts 变量是 id(string) 列表，yourCarts = [id1, id2, id3, .....]; 我想迭代 yourCarts 列表，对于每个 id 从 firestore 获取一个文档，并最终想要获取一个对象列表，然后更新组件的状态，但我无法获取对象列表，而是获取承诺列表。

{
getYourCartList();
        
        
        async function getYourCartList() {
            const userRefID = localStorage.getItem('uid');

            try {
                const userDoc = (await getDoc(doc(db, 'clients', userRefID))).data();
                const yourCarts = userDoc?.yourCarts;

                async function getCart(cartRefID){
                    try {
                        const snapShot = (await getDoc(doc(db, 'products', cartRefID))).data();
                        return {...snapShot, id: cartRefID };
                    } catch (error) {
                        //......
                        return {id: cartRefID}
                    }
                }

                if (yourCarts) {
                    setShoppingCart(yourCarts.map(cartRefID => getCart(cartRefID)))
                }

                console.log('cartlist : ', cartlist)

            } catch (error) {
                console.log('error occurs')
            }
        }
}

建议我哪里做错了

Answer 1

所有异步函数都会返回 Promise。

async

和

await

关键字只是为您隐藏其中一些内容的语法，使代码更具可读性。

举个例子，这两个函数是相同的：

async function test() {
  return `someValue`
}

function test() {
  return new Promise((resolve, error) => {
    return `someValue`
  })
}

现在，至于你的代码。你有这一行：

setShoppingCart(yourCarts.map((cartRefID) => getCart(cartRefID)));

getCart

是一个异步函数。它总是会返回一个承诺。您必须解决它才能从 Promise 中获取返回值。

我们可以使用

Promise.all

创建一个新的 Promise，等待给予它的所有 Promise 得到解析，然后返回一个包含所有返回值的数组。

setShoppingCart(await Promise.all(yourCarts.map((cartRefID) => getCart(cartRefID))));