현재 블로그에서도 Promise.all()를 사용해 데이터를 불러오고 있어 공부 겸 정리해보았다.

Promise.all()

const foodList = [
  { name: 'cake', id: 1 },
  { name: "juice", id: 2 },
  { name: 'coke', id: 3 }
];

const getFoodById = async (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const [food] = foodList .filter(food=> food.id === id)
      resolve(food)
    }, 1000)
  })
}

const getAllFoods = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(foodList)
    }, 2000)
  })
}

const fetchData = async () => {
  // Promise.all() 은 실행할 비동기 태스크들이 담긴 배열을 인자로 받는다.
  const [food, foodList] = await Promise.all([getFoodById(2), getAllFoods()])
  console.log(food)
  console.log(foodList)
}

fetchData()

참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all