将多异步调用转换为单异步调用

Question

我有一段代码，它可以进行多次请求。

​

const allCategory = [];
     if (Array.isArray(categoryTreeItems.value)) {
       const categoryFilter = [3338, 4775, 3411, 3995, 3949, 2934, 3071, 3462, 3629, 5239];
       categoryFilter.forEach(async (cate) => {
         const {category: categoryData, search: searchCategoriesData} = useCategory('category-data-search');
         await searchCategoriesData({id: cate});
         if (categoryData.value.image_url.length > 0) {
            allCategory.push(categoryData.value);
         }
       });
     }

​

我需要单发身份证:有什么帮助吗？

下面是它称之为类别的部分。

​

<div class="show-shop-cate" v-show="allCategory.length > 0">
   <div class="position-slide">
      <div class="slide-shop">
         <p class="title-slide font-bold" :style="{color: '#fff'}">{{ "Shop By Category" }}</p>
         <VueSlickCarousel class="custom-slick" v-bind="getSettingSlide()">
            <div v-for="(item, idx) in allCategory" :key="idx" class="custom-item radius-10 cursor-pointer relative">
               <button type="button" @click="pushRouter(item)">
               <img :src="item.image_url" class="radius-10">
               </button>
            </div>
         </VueSlickCarousel>
      </div>
   </div>
</div>

​

Answer 1

您可以使用Promise.all()和map()代替forEach。

    const allCategory = [];
    if (Array.isArray(categoryTreeItems.value)) {
      const categoryFilter = [3338, 4775, 3411, 3995, 3949, 2934, 3071, 3462, 3629, 5239];
      await Promise.all(categoryFilter.map(async (cate) => {
        const {category: categoryData, search: searchCategoriesData} = useCategory('category-data-search');
        await searchCategoriesData({id: cate});
        if (categoryData.value.image_url.length > 0) {
          allCategory.push(categoryData.value);
        }
      }));
    }

Answer 2

阅读id:‘in’的工作原理，在我看来，您必须收集数组中的id并将它们加入“，”.The如下所示。

const promises = [];
let ids =[]; // id's to be collected 
let result // result 
if (Array.isArray(categoryTreeItems.value)) {
       const categoryFilter = [3338, 4775, 3411, 3995, 3949, 2934, 3071, 3462, 3629, 5239];
       categoryFilter.forEach((cate) => {
         const {category: categoryData, search: searchCategoriesData} = useCategory('category-data-search');
          ids.push(cate)
         
         if (categoryData.value.image_url.length > 0) {
            allCategory.push(categoryData.value);
         }
       });
      results = await searchCategoriesData({id: `in=${ids.join(',')}`})
     }