feat: add useLoadMore (#28)

* feat: add useLoadMore

* refactor: update

* refactor: add test

Author: John60676

example/App.tsx

@@ -1,23 +1,87 @@
-import { defineComponent } from 'vue';
-import { useRequest } from 'vue-request';
+import { defineComponent, reactive, watchEffect } from 'vue';
+import { useLoadMore } from 'vue-request';
+import Mock from 'mockjs';
 
-function testService() {
-  return new Promise<string>(resolve => {
+function api(current: number, total = 10) {
+  let list: string[] = [];
+  if (current <= total) {
+    list = Mock.mock({
+      'list|5': ['@name'],
+    }).list;
+  } else {
+    list = [];
+  }
+  return {
+    current,
+    total,
+    list,
+  };
+}
+type APIReturnType = ReturnType<typeof api>;
+type rawDataType = {
+  data: APIReturnType;
+  dataList: APIReturnType['list'];
+};
+
+function testService(rawData: rawDataType) {
+  const current = (rawData?.data?.current || 0) + 1;
+  console.log(`${current}`, rawData);
+
+  return new Promise<APIReturnType>(resolve => {
     setTimeout(() => {
-      resolve('success');
+      resolve(api(current));
     }, 1000);
   });
 }
 
 export default defineComponent({
   name: 'App',
   setup() {
-    const { run, data, loading } = useRequest(testService);
+    const { loadMore, loadingMore, dataList, noMore, reload } = useLoadMore<
+      APIReturnType,
+      any,
+      APIReturnType['list']
+    >(testService, {
+      isNoMore: d => {
+        return d?.current >= d?.total;
+      },
+    });
+
+    const testReactive = reactive({ first: 'init' });
+
+    watchEffect(() => {
+      console.log(testReactive);
+    });
+
     return () => (
       <div>
-        <button onClick={() => run()}>run</button>
+        <button
+          disabled={noMore.value}
+          onClick={() => {
+            loadMore();
+            Object.keys(testReactive).forEach(key => {
+              testReactive[key] = new Date();
+            });
+          }}
+        >
+          run
+        </button>
+
+        <button
+          onClick={() => {
+            reload();
+          }}
+        >
+          reload
+        </button>
         <br />
-        {loading.value ? 'loading...' : data.value}
+        {loadingMore.value
+          ? 'loading...'
+          : dataList.value?.map((i, idx) => (
+              <div key={idx}>
+                <h4 style="display: inline-block">{idx}</h4>: {i}
+              </div>
+            ))}
       </div>
     );
   },