feat: useFormatResult

Author: NelsonYong

packages/hooks/docs/.vitepress/config.ts

@@ -145,7 +145,7 @@ function getHooksSidebar() {
       text: 'State',
       items: [
         { text: 'useBoolean', link: '/useBoolean/' },
-        // { text: 'useUrlState', link: '/useUrlState/' },
+        { text: 'useFormatResult', link: '/useFormatResult/' },
         { text: 'useDebounce', link: '/useDebounce/' },
         { text: 'useThrottle', link: '/useThrottle/' },
         { text: 'useToggle', link: '/useToggle/' },

packages/hooks/src/index.ts

@@ -13,6 +13,7 @@ import useEventListener from './useEventListener'
 import useEventEmitter from './useEventEmitter'
 import useFavicon from './useFavicon'
 import useFocusWithin from './useFocusWithin'
+import useFormatResult from './useFormatResult'
 import useHover from './useHover'
 import usePreview from './usePreview'
 import useInterval from './useInterval'
@@ -56,6 +57,7 @@ export {
   useEventEmitter,
   useFavicon,
   useFocusWithin,
+  useFormatResult,
   useHover,
   useInterval,
   useInfiniteScroll,

packages/hooks/src/useFormatResult/demo/demo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>name: {{ name }}</div>
+  <div>age: {{ age }}</div>
+  <div>double age: {{ formatAge }}</div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useFormatResult, useInterval } from 'vue-hooks-plus'
+
+  const age = ref(0)
+  const name = useFormatResult({ name: 'vue-hooks-plus' }, data => {
+    return data.name
+  })
+
+  const formatAge = useFormatResult(age, data => {
+    return data * 2
+  })
+
+  useInterval(() => {
+    age.value += 1
+  }, 1000)
+</script>
+
+<style scoped lang="less"></style>

packages/hooks/src/useFormatResult/index.md

@@ -0,0 +1,41 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useFormatResult
+---
+
+# useFormatResult
+
+格式化数据的 hook.
+
+## 代码演示
+
+### 基础用法
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="基本用法"
+  desc="格式化数据">
+</demo>
+
+
+## API
+
+```typescript
+const formatData = useFormatResult(data, callback)
+```
+
+
+
+### Argument
+
+| 参数     | 说明           | 类型                               | 默认值 |
+| -------- | -------------- | ---------------------------------- | ------ |
+| data  | 需要格式化的数据 | `TData`          | -      |
+| callback   | 格式化函数 | `(data: TData) => FData`          | -      |
+
+### Result
+
+| 参数          | 说明               | 类型      |
+| ------------- | ------------------ | --------- |
+| formatData | 格式化后的数据 | `ComputedRef<FData>` \| `FData` |

packages/hooks/src/useFormatResult/index.ts

@@ -0,0 +1,13 @@
+import { isRef, computed, Ref, ComputedRef } from 'vue'
+
+function useFormatResult<TData, FData>(
+  data: TData | Ref<TData>,
+  formatResultCallback: (data: TData) => FData,
+): ComputedRef<FData> {
+  const formatResultData = computed(() =>
+    isRef(data) ? formatResultCallback(data.value) : formatResultCallback(data),
+  )
+  return formatResultData
+}
+
+export default useFormatResult

packages/hooks/src/useRequest/docs/basic/index.md

@@ -19,7 +19,12 @@ map:
   desc="默认发送获取请求">
 </demo>
 
+### 格式化请求数据
 
+由于 `useRequest` 需要保证良好的插件系统，format对于系统来说侵入性太大，这里格式化使用的的是 `useFormatResult`,在请求数据完成后将 data 传入 `useFormatResult` 进行格式化， `useFormatResult` 可以很好的支持 `typescript` 类型提示。
+<br />
+
+<a href="/vue-hooks-plus/docs/useFormatResult/" >跳转至useFormatResult</a>
 
 ## API
 
@@ -57,7 +62,7 @@ const {
 | error        | service 抛出的异常                                                                                       |`Ref<Error>` \| `undefined`                                                |
 | loading      | service 是否正在执行                                                                                     | `Ref<boolean>`                                                             |
 | params       | 当次执行的 service 的参数数组。比如你触发了 `run(1, 2, 3)`，则 params 等于 `[1, 2, 3]`                   | `Ref<TParams>` \| `[]`                                                     |
-| formatResult       | 格式化请求结果                  | `(response: TData) => any` |                                                     |
+| formatResult       | 格式化请求结果，建议使用 `useFormatResult`                  | `(response: TData) => any` |                                                     |
 | run          | <ul><li> 手动触发 service 执行，参数会传递给 service</li><li>异常自动处理，通过 `onError` 反馈</li></ul> | `(...params: TParams) => void`                                        |
 | runAsync     | 与 `run` 用法一致，但返回的是 Promise，需要自行处理异常。                                                | `(...params: TParams) => Promise<TData>`                              |
 | refresh      | 使用上一次的 params，重新调用 `run`                                                                      | `() => void`                                                          |