[JavaScript] async/await을 array.map에 사용 시 Promise { <pending> } 에러

array.map 메소드에 async-await을 적용하자 Promise{<pending>}에러가 발생했다.

 

// orderList는 주문 데이터가 담긴 배열

const data = await orderList.map(async (order) => {
  const itemData = await Order_item.findAll({
    where: {
      Order_id: order.id
    }
  })
  const itemList = itemData.map(el => el.dataValues)
  
  order.itemList = itemList
  return order
})

 

원인

async 함수는 Promise를 리턴하기 때문에 발생한 에러이다.

 

map 함수가 호출한 async 함수는 Promise를 리턴한다.

그리고 map 함수는 이 Promise들을 엘리먼트로 하는 배열을 리턴한다.

 

 

해결방법

const data = await Promise.all( orderList.map(async (order) => {
  const itemData = await Order_item.findAll({
    where: {
      Order_id: order.id
    }
  })
  const itemList = itemData.map(el => el.dataValues)
  
  order.itemList = itemList
  return order
}))

 

Promise.all로 감싸주면 해결된다.

Promise.all은 Promise 엘리먼트로 구성된 배열을 받고, Promise를 처리하여 그 결과값을 다시 배열로 리턴한다.