能否出一个useRequest的组件用法？

[Preyou]

Description

用起来类似这样

    <use-request
      :service="() => $api.general.get_v1_quick_tasks({ params: { current_page: 1, page_size: 10, query: '', user_id: user.id } })"
    >
      <template #default="{ data }">
        {{ data }}
      </template>
    </use-request>

Suggested solution

我有了一版实现，但是ts类型有些问题，不知道怎么解决

<script setup lang="ts" generic="TData, TParams extends unknown[], PluginsOptions extends UseRequestPlugin<TData, TParams>[], SR extends unknown = unknown">
import type {
  UseRequestOptions,
  UseRequestOptionsWithFormatResult,
  UseRequestOptionsWithInitialData,
  UseRequestPlugin,
  useRequestResult,
  UseRequestService,
} from 'vue-hooks-plus/es/useRequest/types'
import { computed } from 'vue'
import { useRequest } from 'vue-hooks-plus'

/**
 * UseRequestAction组件 - 将useRequest hook封装为组件形式
 *
 * @description
 * 该组件将vue-hooks-plus的useRequest hook封装为组件形式，支持所有useRequest的功能和重载形式。
 * 通过作用域插槽将请求状态和方法传递给子组件。
 */
type PluginsMiddleOptionsType<PluginsOptions, TData, TParams extends unknown[] = unknown[]> = PluginsOptions extends (infer P)[]
  ? P extends UseRequestPlugin<TData, TParams, infer R>
    ? R
    : never
  : never

// 工具类型：检查选项中是否包含特定属性
type HasOption<O, K extends string> = O extends { [key in K]: unknown } ? true : false

// 工具类型：获取选项的类型
type GetOptionType<O, K extends string> = O extends { [key in K]: infer T } ? T : never

// 定义Props类型
type Props = {
  /** 请求服务函数（带格式化结果和初始数据） */
  service: UseRequestService<SR, TParams>
  options?: UseRequestOptionsWithFormatResult<TData, TParams, PluginsMiddleOptionsType<PluginsOptions, TData, TParams>, SR> &
    UseRequestOptionsWithInitialData<TData, TParams, PluginsMiddleOptionsType<PluginsOptions, TData, TParams>>
  plugins?: PluginsOptions
} | {
  /** 请求服务函数（带格式化结果） */
  service: UseRequestService<SR, TParams>
  options?: UseRequestOptionsWithFormatResult<TData, TParams, PluginsMiddleOptionsType<PluginsOptions, TData, TParams>, SR>
  plugins?: PluginsOptions
} | {
  /** 请求服务函数（带初始数据） */
  service: UseRequestService<TData, TParams>
  options?: UseRequestOptionsWithInitialData<TData, TParams, PluginsMiddleOptionsType<PluginsOptions, TData, TParams>>
  plugins?: PluginsOptions
} | {
  /** 请求服务函数（基础形式） */
  service: UseRequestService<TData, TParams>
  options?: UseRequestOptions<TData, TParams, PluginsMiddleOptionsType<PluginsOptions, TData, TParams>>
  plugins?: PluginsOptions
}

// 定义默认插槽的类型
type SlotProps = useRequestResult<
  TData,
  TParams,
  HasOption<NonNullable<typeof props.options>, 'formatResult'> extends true
    ? GetOptionType<NonNullable<typeof props.options>, 'formatResult'>
    : false,
  HasOption<NonNullable<typeof props.options>, 'initialData'> extends true
    ? GetOptionType<NonNullable<typeof props.options>, 'initialData'>
    : false
>

const props = defineProps<Props>()

defineSlots<{
  default: (props: SlotProps) => unknown
}>()
const defaultOptions = {} as const
const defaultPlugins = [] as const

const options = computed(() => props.options || defaultOptions)
const plugins = computed(() => props.plugins || defaultPlugins)

// 调用useRequest并获取结果
const result = useRequest<TData, TParams, PluginsOptions, SR>(
  // @ts-expect-error 这里的类型可以忽略
  props.service,
  options.value,
  plugins.value,
)
</script>

<template>
  <slot v-bind="result" />
</template>

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[NelsonYong]

@Preyou 暂时没想到这样实现的好处，可以展开说说？

[Preyou]

举个实际应用的例子吧，我在用Naive UI 写一个表格，表格的每一行都有个删除按钮，按照naiveui的写法，是在列属性里传递的是一个渲染函数，类似这样

const {loading，run} = useRequest(()=>api())

const columns = [
    {
      title: 'No',
      key: 'no'
    },
    {
      title: 'Title',
      key: 'title'
    },
    {
      title: 'Length',
      key: 'length'
    },
    {
      title: 'Action',
      key: 'actions',
      render(row) {
        return <n-button loading={loading.value} onClick={run()}>删除</n-button>
      }
    }
  ]

这个写法有个问题，所有的删除按钮共用了一个loading，为了解决这个问题，我不得不单独封装一个删除按钮组件，以隔离状态。为了使封装的按钮兼容原来的按钮，并保持类型提示，我不得不再写一些样板代码去继承原来的button。

这里还要考虑到action并不止一个，因此我需要进一步提高button的抽象程度，允许他接受一个service选项，来支持不同的请求。很容易想到，我还要接受useRequest的各个选项来支持useRequest的个性化设置，并处理不同选项导致的返回值类型问题。因此，自然而然的，我实际上是在封装一个UseRequest组件。

有了UseRequest后，写起来像这样

const columns = [
    {
      title: 'No',
      key: 'no'
    },
    {
      title: 'Title',
      key: 'title'
    },
    {
      title: 'Length',
      key: 'length'
    },
    {
      title: 'Action',
      key: 'actions',
      render(row) {
        return (
           <use-request>
             {{
                 default: ({loading,run}) =>  <n-button loading={loading} onClick={run()}>删除</n-button>,
              }}
           </use-request>
         )
      }
    }
  ]

我们甚至可以进一步封装这个UseRequest组件，提供loading插槽和error插槽。

再考虑到部份组件是强依赖某些数据的，没有就会报错，因此写起来会有些别扭，要么选择在外面再包一层，要么像这样

const { loading, run, runAsync, data } = useRequest(service, {
  manual: true,
})

await runAsync()

我们还可以提供一个 sync 属性来指定default插槽的渲染方式

    <use-request
      :service="service"
      :sync="true"
    >
       <!-- 在请求到data之前都不会渲染该插槽  -->
       <template #default="{ data }">
          <!-- data必须有值，否则组件报错  -->
          <some :data="data"/>      
       </template>
       <template #loading>
          <!-- 这里放骨架屏或者loading组件  -->
          <loading />      
       </template>
       <template #error={data:err}>
          <!-- 请求出错了就显示该组件  -->
          <error-500 :err="err" />      
       </template>
    </use-request>

[Preyou]

这里还可以参考vueuse，他的很多hooks都有对应的组件用法 https://vueuse.org/guide/components.html

[NelsonYong]

@Preyou 我觉得 table 这个例子你想复杂了，我这里想到有两种方式，第一种是可以搭配 id 来解决共用问题，比如你进行 delete 的时候，假设是需要传递 ID， run(id), loading 的话是同一个 api 的，可以使用 params 属性。比如 loading.value && params.id===id

第二种，可以将 render 的action 抽离成一个组件，在这个组件内部用 use request, 那 loading 也能隔离。

[Preyou]

对于第一种方案，我需要有个全局的变量去存储当前选中的行，另外如果业务比较复杂，action比较久，在一个action结束之前，又点击了另一个action，会导致这两个action的loading状态冲突。

对于第二种，这只是解决了个案，并不是通用解决方案，就像我之前提到的那样

这个写法有个问题，所有的删除按钮共用了一个loading，为了解决这个问题，我不得不单独封装一个删除按钮组件，以隔离状态。为了使封装的按钮兼容原来的按钮，并保持类型提示，我不得不再写一些样板代码去继承原来的button。

这里还要考虑到action并不止一个，因此我需要进一步提高button的抽象程度，允许他接受一个service选项，来支持不同的请求。很容易想到，我还要接受useRequest的各个选项来支持useRequest的个性化设置，并处理不同选项导致的返回值类型问题。因此，自然而然的，我实际上是在封装一个UseRequest组件。

[NelsonYong]

@Preyou 懂你意思，component 的方式使用起来确实会少写一些代码提高效率。我会在近期安排 👩🏻‍💻

[NelsonYong]

@Preyou 目前发现组件形式只适用于查询场景，第一版如下

[NelsonYong]

@Preyou 目前已经更新至 vue-hooks-plus@2.4.0-alpha.1
使用姿势在 docs/demo/useRequest/demo.vue，如果存在问题请及时反馈，感谢 ❤️

  const UseRequestQuery = createUseRequestQueryComponent<string>()

 <use-request-query :service="() => getUsername({ desc: desc })" :refresh-deps="[desc]">
    <template #default="{data}">
      <div>name：{{ data }}</div>
    </template>
    <template #loading>
      <div>loading</div>
    </template>
    <template #error>
      <div>error</div>
    </template>
  </use-request-query>

[Preyou]

@Preyou 目前发现组件形式只适用于查询场景，第一版如下

要适用于其他场景，我只需要将manual设为true就好了吧，比如删除

    <use-request
      :service="() => del(id)"
      manual
    >
      <template #default="{ run }">
        <button @click="run()">删除</button>
      </template>
    </use-request>

[NelsonYong]

@Preyou 2.4.0-alpha.2 支持了

[NelsonYong]

通过 create 方法你可以自由新增很多业务组件

[NelsonYong]

@Preyou .2 的依赖刷新忘加了，使用 2.4.0-alpha.3