@vuetkit/core 0.0.2 → 0.0.3

package/README.md

@@ -3,3 +3,9 @@
 ## Description
 
 Collection of business development hooks for Vue3 projects.
+
+## Hooks List
+
+### Network
+
+- [useRequest](/core/src/network/useRequest/)

package/dist/index.d.ts

@@ -1,7 +1,24 @@
-//#region src/demo/useDemo/index.d.ts
-declare function useDemo(): string;
-//#endregion
+import { Ref } from "vue";
+
 //#region src/network/useRequest/index.d.ts
-declare function useRequest(): string;
+interface RequestOptions<T> {
+  manual?: boolean;
+  defaultParams?: any;
+  initialData?: T;
+  delayLoadingTime?: number;
+  formatData?: (data: unknown) => T;
+  onSuccess?: (data: T) => void;
+  onError?: (error: any) => void;
+  onFinally?: () => void;
+}
+interface RequestReturn<T> {
+  loading: Ref<boolean>;
+  data: Ref<T | null>;
+  error: Ref<unknown>;
+  execute: (params?: any) => void;
+  cancel: () => void;
+}
+type RequestService = (params?: any) => Promise<unknown>;
+declare function useRequest<T>(service: RequestService, options?: RequestOptions<T>): RequestReturn<T>;
 //#endregion
-export { useDemo, useRequest };
+export { RequestOptions, RequestReturn, RequestService, useRequest };

package/dist/index.js

@@ -1,11 +1,94 @@
-//#region src/demo/useDemo/index.ts
-function useDemo() {
-	return "hello useDemo";
-}
-//#endregion
+import { realObj } from "@vuetkit/shared";
+import { onMounted, onUnmounted, ref, shallowRef, toValue } from "vue";
 //#region src/network/useRequest/index.ts
-function useRequest() {
-	return "useRequest";
+function useRequest(service, options) {
+	const { initialData = null, manual, defaultParams, delayLoadingTime = 300, formatData, onSuccess, onError, onFinally } = options || {};
+	const loading = ref(false);
+	const data = shallowRef(initialData);
+	const error = ref();
+	const timer = ref(null);
+	const requestComplete = ref(false);
+	const isDiscardRequestData = ref(false);
+	const requestId = ref(0);
+	const cancel = () => {
+		loading.value = false;
+		isDiscardRequestData.value = true;
+		clearTimer();
+	};
+	/**
+	* get params
+	* @param oldParams old params
+	* @param newParams new params
+	* @returns request params
+	* @description get oldParams and newParams, if both are obj, merge them, otherwise newParams will be cover oldParams
+	*/
+	function getParams(oldParams, newParams) {
+		if (!oldParams && !newParams) return newParams;
+		if (oldParams) {
+			const oldParamsVal = toValue(oldParams);
+			if (newParams) {
+				const newParamsVal = toValue(newParams);
+				if (realObj(oldParamsVal) && realObj(newParamsVal)) return {
+					...oldParamsVal,
+					...newParamsVal
+				};
+				return newParamsVal;
+			}
+			return oldParamsVal;
+		}
+		return toValue(newParams);
+	}
+	function clearTimer() {
+		if (timer.value) {
+			clearTimeout(timer.value);
+			timer.value = null;
+		}
+		requestComplete.value = false;
+	}
+	function delayLoading() {
+		timer.value = setTimeout(() => {
+			if (!requestComplete.value) loading.value = true;
+		}, delayLoadingTime);
+	}
+	async function execute(params) {
+		try {
+			const currentRequestId = ++requestId.value;
+			isDiscardRequestData.value = false;
+			clearTimer();
+			const requestParams = getParams(defaultParams, params);
+			delayLoading();
+			const res = await service(requestParams);
+			error.value = null;
+			requestComplete.value = true;
+			if (currentRequestId !== requestId.value) return;
+			const formatRes = formatData ? formatData(res) : res;
+			if (isDiscardRequestData.value) return;
+			data.value = formatRes;
+			onSuccess === null || onSuccess === void 0 || onSuccess(data.value);
+		} catch (err) {
+			error.value = err;
+			onError === null || onError === void 0 || onError(err);
+		} finally {
+			clearTimer();
+			loading.value = false;
+			isDiscardRequestData.value = false;
+			onFinally === null || onFinally === void 0 || onFinally();
+		}
+	}
+	onMounted(() => {
+		if (!manual) execute();
+	});
+	onUnmounted(() => {
+		clearTimer();
+		requestId.value = 0;
+	});
+	return {
+		loading,
+		data,
+		error,
+		execute,
+		cancel
+	};
 }
 //#endregion
-export { useDemo, useRequest };
+export { useRequest };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetkit/core",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Collection of business development hooks for Vue3 projects",
   "author": "Kalu5",
   "license": "MIT",
@@ -16,6 +16,9 @@
     "README.md",
     "dist"
   ],
+  "peerDependencies": {
+    "vue": "^3.5.35"
+  },
   "scripts": {
     "build": "tsdown --config-loader tsx"
   }