feat: add pending controller

vbenjs · Jan 21, 2025 · 783f35f · 783f35f
1 parent c2cf1d8
commit 783f35f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/packages/effects/common-ui/src/components/icon-picker/icons.ts b/packages/effects/common-ui/src/components/icon-picker/icons.ts
@@ -14,8 +14,23 @@ interface IconifyResponse {
   aliases?: Recordable<string>;
 }
 
-export async function fetchIconsData(prefix: string) {
-  if (!Reflect.has(ICONS_MAP, prefix) || !ICONS_MAP[prefix]) {
+const PENDING_REQUESTS: Recordable<Promise<string[]>> = {};
+
+/**
+ * 通过Iconify接口获取图标集数据。
+ * 同一时间多个图标选择器同时请求同一个图标集时，实际上只会发起一次请求（所有请求共享同一份结果）。
+ * 请求结果会被缓存，刷新页面前同一个图标集不会再次请求
+ * @param prefix 图标集名称
+ * @returns 图标集中包含的所有图标名称
+ */
+export async function fetchIconsData(prefix: string): Promise<string[]> {
+  if (Reflect.has(ICONS_MAP, prefix) && ICONS_MAP[prefix]) {
+    return ICONS_MAP[prefix];
+  }
+  if (Reflect.has(PENDING_REQUESTS, prefix) && PENDING_REQUESTS[prefix]) {
+    return PENDING_REQUESTS[prefix];
+  }
+  PENDING_REQUESTS[prefix] = (async () => {
     try {
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 1000 * 10);
@@ -33,8 +48,9 @@ export async function fetchIconsData(prefix: string) {
       ICONS_MAP[prefix] = list.map((v) => `${prefix}:${v}`);
     } catch (error) {
       console.error(`Failed to fetch icons for prefix ${prefix}:`, error);
-      return [];
+      return [] as string[];
     }
-  }
-  return ICONS_MAP[prefix];
+    return ICONS_MAP[prefix];
+  })();
+  return PENDING_REQUESTS[prefix];
 }
diff --git a/playground/src/views/demos/features/icons/index.vue b/playground/src/views/demos/features/icons/index.vue
@@ -94,7 +94,7 @@ const inputComponent = h(Input);
           v-model="iconValue3"
           icon-slot="addonAfter"
           model-value-prop="value"
-          prefix="mdi"
+          prefix1="mdi"
         />
       </div>
       <div class="flex items-center gap-5">
@@ -106,7 +106,7 @@ const inputComponent = h(Input);
           style="width: 300px"
         >
           <template #addonAfter>
-            <IconPicker v-model="iconValue4" prefix="mdi-light" type="icon" />
+            <IconPicker v-model="iconValue4" prefix1="mdi-light" type="icon" />
           </template>
         </Input>
       </div>