路线返回等待功能完成

Question

In the following code, the route is returning before the array is populated, so the array returns empty. I know I'm doing something wrong with promises and/or async and await, but I can't figure out what it is.

router.get('/:deckId', auth.required, (req, res) => {
  Deck.findById(req.params.deckId).then(deck => {
    let cardArray = []
    deck.cards.forEach(card => {
      const url = `https://api.scryfall.com/cards/${card.id}`
      getScryFallCard(url).then(a => cardArray.push(a))
    })
    res.json({
      name: deck.name,
      id: deck._id,
      cards: cardArray
    })
  })
})

I have tried making all the function asynchronous and putting await next to the child function. I've tried creating a promise, putting await next to that promise, and then returning the response. I've tried using a callback on the mongoose function rather than a Promise. I've tried other combinations of promise, async, await, and callbacks with no success. What is the correct way to return the response after the array has been populated?

This is the response I get. The cards key should be populated with an array of cards.

{
    "name": "Dovin",
    "id": "5ca50448232aa920636dd571",
    "cards": []
}

Answer 1

router.get('/:deckId', auth.required, (req, res) => {
  Deck.findById(req.params.deckId).then(async deck => {
    let cardArray = []
    for (let card of deck.cards) {
      const url = `https://api.scryfall.com/cards/${card.id}`
      let a = await getScryFallCard(url)
      cardArray.push(a)
    }
    res.json({
      name: deck.name,
      id: deck._id,
      cards: cardArray
    })
  })
})

You need to call res.json after all code in the loop is executed. await makes sure next line is not executed until we get the asynchronous job done. So response ( res.json ) is send after all calls are completed inside the loop.