Question

我有一个cardsList是从fetch()获取的对象。我在cardList上进行了映射，并向每个列表进行了新请求，以获取更多信息。我遇到了一个非常奇怪的情况：地图是同步的，但它会先打印“ 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
}

Answer 1

Promise.all是你的朋友

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
}

映射完成后在object.map（）内部获取

1 个答案: