feat: useInfiniteScroll 无限滚动加载

Author: NelsonYong

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

@@ -131,6 +131,10 @@ function getHooksSidebar() {
           text: '错误重试',
           link: '/useRequest/retry/',
         },
+        {
+          text: '滚动加载、分页加载',
+          link: '/useRequest/scroll/',
+        },
         {
           text: '自定义插件 🌟',
           link: '/useRequest/plugin/',

packages/hooks/src/useInfiniteScroll/index.md

@@ -75,3 +75,65 @@ useInfiniteScroll 的第一个参数 `service` 是一个异步函数，对这个
   title="mutate 数据突变"
   desc="">
 </demo>
+
+## API
+
+```ts
+export type Data = { list: any[];[key: string]: any; };
+export type Service<TData extends Data> = (currentData?: TData) => Promise<TData>;
+
+const {
+  data: Ref<TData>;
+  loading: ComputedRef<boolean>;
+  loadingMore: Ref<boolean>;
+  noMore: ComputedRef<boolean>;
+  loadMore: () => void;
+  loadMoreAsync: () => Promise<TData>;
+  reload: () => void;
+  reloadAsync: () => Promise<TData>;
+  cancel: () => void;
+  mutate: (data?: TData) => void;
+} = useInfiniteScroll<TData extends Data>(
+  service: (currentData?: TData) => Promise<TData>,
+  {
+    target?: BasicTarget;
+    isNoMore?: (data?: TData) => boolean;
+    threshold?: number;
+    manual?: boolean;
+    reloadDeps?: DependencyList;
+    onBefore?: () => void;
+    onSuccess?: (data: TData) => void;
+    onError?: (e: Error) => void;
+    onFinally?: (data?: TData, e?: Error) => void;
+  }
+);
+```
+
+### Result
+
+| 参数          | 说明                                                                       | 类型                     |
+| ------------- | -------------------------------------------------------------------------- | ------------------------ |
+| data          | service 返回的数据，其中的 `list` 属性为聚合后数据                         | `Ref<TData>` \| `undefined`   |
+| loading       | 是否正在进行首次请求                                                       | `ComputedRef<boolean>`                |
+| loadingMore   | 是否正在进行更多数据请求                                                   | `Ref<boolean>`                |
+| noMore        | 是否没有更多数据了，配置 `options.isNoMore` 后生效                         | ` ComputedRef<boolean>`                |
+| loadMore      | 加载更多数据，会自动捕获异常，通过 `options.onError` 处理                  | `() => void`             |
+| loadMoreAsync | 加载更多数据，与 `loadMore` 行为一致，但返回的是 Promise，需要自行处理异常 | `() => Promise<TData>`   |
+| reload        | 加载第一页数据，会自动捕获异常，通过 `options.onError` 处理                | `() => void`             |
+| reloadAsync   | 加载第一页数据，与 `reload` 行为一致，但返回的是 Promise，需要自行处理异常 | `() => Promise<TData>`   |
+| mutate        | 直接修改 `data`                                                            | `(data?: TData) => void` |
+| cancel        | 忽略当前 Promise 的响应                                                    | `() => void`             |
+
+### Options
+
+| 参数       | 说明                                                                                                                                             | 类型                                                        | 默认值  |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- | ------- |
+| target     | 父级容器，如果存在，则在滚动到底部时，自动触发 `loadMore`。需要配合 `isNoMore` 使用，以便知道什么时候到最后一页了。                              | `() => Element` \| `Element` \| `MutableRefObject<Element>` | -       |
+| isNoMore   | 是否有最后一页的判断逻辑，入参为当前聚合后的 `data`                                                                                              | `(data?: TData) => boolean`                                 | -       |
+| threshold  | 下拉自动加载，距离底部距离阈值                                                                                                                   | `number`                                                    | `100`   |
+| reloadDeps | 变化后，会自动触发 `reload`                                                                                                                      | `WatchSource` \| `any[]` \|` any`                                                     | -       |
+| manual     | <ul><li> 默认 `false`。 即在初始化时自动执行 service。</li><li>如果设置为 `true`，则需要手动调用 `reload` 或 `reloadAsync` 触发执行。 </li></ul> | `boolean`                                                   | `false` |
+| onBefore   | service 执行前触发                                                                                                                               | `() => void`                                                | -       |
+| onSuccess  | service resolve 时触发                                                                                                                           | `(data: TData) => void`                                     | -       |
+| onError    | service reject 时触发                                                                                                                            | `(e: Error) => void`                                        | -       |
+| onFinally  | service 执行完成时触发                                                                                                                           | `(data?: TData, e?: Error) => void`                         | -       |

packages/hooks/src/useInfiniteScroll/index.ts

@@ -34,7 +34,7 @@ const useInfiniteScroll = <TData extends Data>(
     return isNoMore(finalData.value);
   });
 
-  const { loading, run, runAsync,params, cancel } = useRequest(
+  const { loading, run, runAsync, cancel } = useRequest(
     async (lastData?: TData) => {
       const currentData = await service(lastData);
 
@@ -119,8 +119,7 @@ const useInfiniteScroll = <TData extends Data>(
     loading: _loading,
     loadingMore,
     noMore,
-    run,
-    params,
+
     loadMore: loadMore,
     loadMoreAsync: loadMoreAsync,
     reload: reload,

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

@@ -0,0 +1,9 @@
+---
+map:
+  # 映射到docs的路径
+  path: /useRequest/scroll/
+---
+
+# 见👇 useInfiniteScroll
+
+<a href="/useInfiniteScroll/" >滚动加载和分页加载</a>