Merge pull request #14 from InhiblabCore/dev

feat: 新增 useUrlState 和  useFetch

Author: NelsonYong

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

@@ -1,9 +1,9 @@
 import { defineConfig } from 'vitepress'
 import { applyPlugins } from '@vue-hooks-plus/md-demo-plugins'
 import { genTemp } from '@vue-hooks-plus/vite-plugin-gen-temp'
+import { resolve } from 'path'
 
 const base = process.env.NODE_ENV === 'production' ? '/vue-hooks-plus/docs' : ''
-const { resolve } = require('path')
 
 export default defineConfig({
   head: [
@@ -123,6 +123,10 @@ function getHooksSidebar() {
           text: '节流',
           link: '/useRequest/throttle/',
         },
+        {
+          text: '并行请求',
+          link: '/useRequest/fetchs/',
+        },
         {
           text: '缓存 & SWR',
           link: '/useRequest/cache/',
@@ -145,6 +149,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/' },
@@ -162,6 +167,7 @@ function getHooksSidebar() {
       items: [
         { text: 'useDebounceFn', link: '/useDebounceFn/' },
         { text: 'useThrottleFn', link: '/useThrottleFn/' },
+        { text: 'useFetchs', link: '/useFetchs/' },
         { text: 'useLockFn', link: '/useLockFn/' },
         { text: 'useUpdate', link: '/useUpdate/' },
         { text: 'useInterval', link: '/useInterval/' },

packages/hooks/package.json

@@ -39,6 +39,7 @@
 		"js-cookie": "^2.x.x",
 		"lodash": "^4.17.21",
 		"marked": "^4.0.17",
+		"qs": "^6.11.0",
 		"query-string": "^7.1.1"
 	},
 	"devDependencies": {
@@ -48,6 +49,7 @@
 		"@types/lodash": "^4.14.178",
 		"@types/marked": "^4.0.3",
 		"@types/node": "^17.0.21",
+		"@types/qs": "^6.9.7",
 		"@vitejs/plugin-vue": "^2.0.0",
 		"@vue-hooks-plus/md-demo-plugins": "^1.0.0",
 		"@vue-hooks-plus/vite-plugin-gen-temp": "1.4.0",

packages/hooks/pnpm-lock.yaml

@@ -14,6 +14,7 @@ import useEventEmitter from './useEventEmitter'
 import useFavicon from './useFavicon'
 import useFocusWithin from './useFocusWithin'
 import useFormatResult from './useFormatResult'
+import useFetchs from './useFetchs'
 import useHover from './useHover'
 import usePreview from './usePreview'
 import useInterval from './useInterval'
@@ -58,6 +59,7 @@ export {
   useFavicon,
   useFocusWithin,
   useFormatResult,
+  useFetchs,
   useHover,
   useInterval,
   useInfiniteScroll,

packages/hooks/src/index.ts

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div v-for="item in datas" :key="item.key">
+      {{ item.data }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { useFetchs } from 'vue-hooks-plus'
+
+  async function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(`vue-hooks-plus ${params.desc}`)
+      }, 2000)
+    })
+  }
+
+  const arr = ['牛', '小牛', '中牛', '大牛']
+
+  const { fetchRun, fetchs } = useFetchs(
+    getUsername,
+    { manual: true },
+    {
+      fetchKey: params => {
+        return params.desc
+      },
+    },
+  )
+
+  arr.forEach(item => {
+    fetchRun({ desc: item })
+  })
+
+  const datas = computed(() =>
+    Object.keys(fetchs.value).map(key => ({
+      name: fetchs.value[key].key,
+      data: fetchs.value[key].data,
+      loading: fetchs.value[key].loading,
+      key: fetchs.value[key].key,
+    })),
+  )
+</script>
+
+<style scoped lang="less"></style>

packages/hooks/src/useFetchs/demo/demo.vue

@@ -0,0 +1,50 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useFetchs
+---
+
+# useFetchs
+
+基于 `useRequest` 实现强大的并行请求的能力，优雅的管理多个相同url请求，不同参数的请求。
+
+## 代码演示
+
+### 基础用法
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="基本用法"
+  desc="多个请求同时进行的请求状态管理">
+</demo>
+
+
+## API
+
+```typescript
+const { fetchRun, fetchs } = useFetchs(
+    service,
+    options,
+    {
+      fetchKey: params => string | number
+    },
+  )
+```
+
+### Params
+
+| 参数    | 说明                  | 类型                                                        | 默认值 |
+| ------- | --------------------- | ----------------------------------------------------------- | ------ |
+| fetchs  | 收集的所有请求状态 | ` FetchType<TData, TParams> ` | -      | |
+| fetchRun  | 需要运行的函数 | `(...args) => void` | -      | |
+| options | 额外的配置项          | `useRequest Options`                                                   | -      |
+
+### Options
+
+参考 `useRequest` 的option，注意，` fetchRun ` 需要在手动模式下 `manual` 强制为 `true`
+
+| 参数          | 说明               | 类型      |
+| ------------- | ------------------ | --------- |
+| fetchKey | 获取key，用于注入useRequest的cacheKey | `(...args) => string \| number` |
+
+

packages/hooks/src/useFetchs/index.md

@@ -0,0 +1,81 @@
+import { Service, Options } from '@/useRequest/types'
+import { ref, watch } from 'vue'
+import useRequest from '../useRequest/index'
+
+const DEFAULT_KEY = 'VUE_HOOKS_PLUS_USE_REQUEST_DEFAULT_KEY'
+
+type FetchType<TData, TParams> = Record<
+  string | number,
+  {
+    data: TData | undefined
+    params: TParams
+    loading: boolean
+    key: string | number
+  }
+>
+
+type ParamsType<P> = P extends any[] ? any[] : any
+
+function useFetchs<TData, TParams>(
+  service: Service<TData, ParamsType<TParams>>,
+  options: Options<TData, ParamsType<TParams>, any> & {
+    manual: true
+  },
+  self: {
+    fetchKey?: (...args: ParamsType<TParams>) => string
+  },
+) {
+  const fetchKeyPersist = ref(self?.fetchKey)
+
+  const fetchs = ref<FetchType<TData, TParams>>({})
+  const newFetchs = ref<FetchType<TData, TParams>>({})
+
+  const getFetchs = (fetchs_: Record<string | number, any>) => {
+    newFetchs.value = fetchs_
+  }
+
+  const fetchRun = (...args: TParams extends any[] ? any[] : any) => {
+    const newstFetchKey = ref()
+    const cacheKey = fetchKeyPersist.value?.(...args) ?? DEFAULT_KEY
+    newstFetchKey.value = cacheKey
+
+    const { data, run, params, loading } = useRequest(service, {
+      ...options,
+      cacheKey,
+      manual: true,
+    })
+
+    // @ts-ignore
+    fetchs.value[cacheKey as string] = { key: cacheKey, data, params, loading }
+
+    getFetchs(fetchs.value)
+
+    run(...args)
+
+    watch([data, params, loading, newstFetchKey], curr => {
+      const [
+        newData = undefined,
+        newParams = undefined,
+        newLoading = false,
+        key = DEFAULT_KEY,
+      ] = curr
+      fetchs.value[key as string] = {
+        key: key as string | number,
+        // @ts-ignore
+        data: newData,
+        // @ts-ignore
+        params: newParams,
+        // @ts-ignore
+        loading: newLoading,
+      }
+      getFetchs(fetchs.value)
+    })
+  }
+
+  return {
+    fetchs: newFetchs,
+    fetchRun,
+  }
+}
+
+export default useFetchs

packages/hooks/src/useFetchs/index.ts

@@ -1,6 +1,6 @@
 import useEventListener from "../useEventListener";
 import type { BasicTarget } from "../utils/domTarget";
-import { useBoolean } from "..";
+import useBoolean from "../useBoolean";
 
 export interface Options {
   onFocus?: (e: FocusEvent) => void;