refactor: 修改 createUseRequestQueryComponent 为 createUseRequestComponent，增强类型支持并简化 props 处理

Author: NelsonYong

packages/hooks/src/useRequest/component-use/UseRequest.ts

@@ -1,31 +1,28 @@
-import { defineComponent, PropType, computed, SlotsType, unref, watch } from "vue";
+import { defineComponent, PropType, computed, SlotsType, unref } from "vue";
 import useRequest from "../useRequest";
 import type {
   UseRequestService,
   UseRequestOptions,
   UseRequestPlugin,
 } from "../types";
-import { isEqual } from "lodash-es";
 
 // 泛型工厂
-function createUseRequestQueryComponent<TData = any, TParams extends unknown[] = any[]>() {
+function createUseRequestComponent<
+  TServiceData = any,
+  TParams extends unknown[] = any[],
+  TFormatResult = TServiceData
+>() {
   // 先定义组件
   const Comp = defineComponent({
     name: "UseRequest",
     props: {
       service: {
-        type: Function as PropType<UseRequestService<TData, TParams>>,
+        type: Function as PropType<UseRequestService<TServiceData, TParams>>,
         required: true,
       },
-
-      initialData: {
-        type: String,
-        default: () => undefined,
-      },
       ready: {
-        // 支持 initialData
         type: Object as PropType<
-          UseRequestOptions<TData, TParams>['ready']
+          UseRequestOptions<TServiceData, TParams>["ready"]
         >,
         default: () => ({
           ready: false,
@@ -36,46 +33,37 @@ function createUseRequestQueryComponent<TData = any, TParams extends unknown[] =
         default: () => [],
       },
       plugins: {
-        type: Array as PropType<UseRequestPlugin<TData, TParams>[]>,
+        type: Array as PropType<UseRequestPlugin<TServiceData, TParams>[]>,
         default: () => [],
       },
+      formatResult: {
+        type: Function as PropType<(res: TServiceData) => TFormatResult>,
+        default: undefined,
+      },
     },
     slots: Object as SlotsType<{
-      default: (props: Pick<ReturnType<typeof useRequest<TData, TParams>>, "data">) => any,
+      default: (props: ReturnType<typeof useRequest<TFormatResult, TParams>>) => any,
       loading: () => any,
-      error: (props: { error: ReturnType<typeof useRequest<TData, TParams>>["error"]['value'] }) => any,
+      error: (props: { error: ReturnType<typeof useRequest<TFormatResult, TParams>>["error"]['value'] }) => any,
+      target?: () => any
     }>,
     setup(props, { slots }) {
-
       // 支持响应式 props
       const service = computed(() => unref(props.service));
       const plugins = computed(() => unref(props.plugins));
 
-
-      // 让 props 转为响应式
-      const ready = computed(() => props.ready);
-      const refreshDeps = computed(() => props.refreshDeps);
-
-
       // useRequest 的返回类型会自动推断
-      const result = useRequest(service.value, {
-        // @ts-ignore
-        initialData: props.initialData,
-        // @ts-ignore
-        ready,
-        // @ts-ignore
-        refreshDeps,
-      }, plugins.value);
+      const options = {
+        ready: props.ready,
+        refreshDeps: props.refreshDeps,
+      };
+      // @ts-expect-error: formatResult 可能不是 options 的一部分
+      if (props.formatResult) options.formatResult = props.formatResult;
 
-      watch(
-        refreshDeps,
-        (newVal, oldVal) => {
-          // 如果 refreshDeps 没有变化，则不刷新
-          // 这里对比的是数组，所以需要使用 isEqual 来对比
-          if (isEqual(newVal, oldVal)) return;
-          result.refresh();
-        },
-        { immediate: true }
+      const result = useRequest(
+        service.value,
+        options,
+        plugins.value
       );
 
       return () => {
@@ -86,20 +74,16 @@ function createUseRequestQueryComponent<TData = any, TParams extends unknown[] =
           return slots.error({ error: result.error.value });
         }
         if (!result.loading.value && !result.error.value && slots.default) {
-
-          return slots.default({
-            // @ts-ignore
-            data: result.data.value
-          });
+          return slots.default(result as any);
         }
         return null;
       };
     },
   });
 
   // 用类型断言给组件加上 slots 类型声明
-  return Comp
+  return Comp;
 }
 
 // 导出泛型组件工厂
-export default createUseRequestQueryComponent;
+export default createUseRequestComponent;