javascript - 映射完成后在object.map()内部获取

我有一个cardsList，它是从fetch()获得的对象。
我在cardList上进行了映射，并向每个列表进行了新请求，以获取更多信息。
我遇到了一个非常奇怪的情况:
map 是同步的，但它将首先打印“Log2”，然后打印“Log1”。

毕竟，当我打印cardsList时，我会看到所有cardInfo对象的信息，但是如果尝试像cardsList[0].cardInfo一样访问它，则无法定义。

你知道发生了什么吗？

* Obs:我尝试使用fetchCardsInfo中的await进行操作，但是我遇到了相同的情况:打印时可以看到信息，但无法访问。

buscarCartoes = async () => {
    let cardsList = await CodeConnectRequests.fetchCardsList()

    cardsList.map((card) => {
        const cardInfo = CodeConnectRequests.fetchCardsInfo(card.cartao.tkCartao)
        cardInfo.then(data=>{
            console.log('Log1')
            card['cardInfo'] = data
        })

        return card
    })

    console.log('Log2')
    console.log(cardsList)// Here I can see cardInfo infs
    console.log(cardsList[0].cardInfo)// But hete cardInfo will be undefined
}

最佳答案

Promise.all 是你的 friend

buscarCartoes = async () => {
    let cardsList = await CodeConnectRequests.fetchCardsList()

    // wait for nested requests to fulfill
    await Promise.all(cardsList.map(async (card) => { // Notice callback is async
        card.cardInfo = await CodeConnectRequests.fetchCardsInfo(card.cartao.tkCartao)
        return card
    })

    console.log('Log2')
    console.log(cardsList)// Here I can see cardInfo infs
    console.log(cardsList[0].cardInfo)// But hete cardInfo will be undefined
}