Блог

У меня есть Category объект, у каждого Category есть SubCategories . Каков был бы правильный способ загрузки для каждого Category его SubCategories ?

 const getCategories = async () => {
  const { data: categories } = await axios.get(`api/Categories/GetCategories`); 
  return categories;
};

const getSubCategories = async catId => {
  const { data: subCategories } = await axios.get(`../api/SubCategories/GetSubCategories?catId=${catId}`); 
  return subCategories;
};
  

Это простой, но неоптимальный метод из-за отсутствия асинхронности.

 const categories = getCategories().map(category => {
    return {
        category
        , subCategory: getSubCategories(category.catId)
    }
})
  

Лучшим способом было бы удалить await из getSubCategories и просто вернуть обещание.

 const getSubCategories = async catId => axios.get(`../api/SubCategories/GetSubCategories?catId=${catId}`)
  

Когда вы возвращаете обещания, они могут выполняться асинхронно.

 const categories = getCategories()
  

Если вы используете асинхронную функцию, вы можете сделать:

 const subCategories = await Promise.all(categories.map(category => getSubCategories(category.catId))
const categoriesWithSub = zipWith(categories, subCategories, (category, subCategory) => ({category, subCategory}))
  

В противном случае

 Promise.all(categories.map(category => getSubCategories(category.catId))
.then(subCategories => {
    const categoriesWithSub = zipWith(categories, subCategories, (category, subCategory) => ({category, subCategory}))
})
  

categoriesWithSub представляет собой массив объектов следующей формы.

 [{
    category: {} // however your original category object looked like.
    , subCategory: [] // The array of subCategories for this category.
}]