@varlet/axle 1.0.2 → 1.1.0

package/dist/use.d.mts

@@ -9,6 +9,7 @@ interface RunOptions<V, P, D> {
   config?: AxleRequestConfig<D>;
   resetValue?: boolean;
   cloneResetValue?: boolean | ((value: V) => V);
+  silent?: boolean;
 }
 type UseAxleExtra<V> = {
   loading: Ref<boolean>;
@@ -45,11 +46,13 @@ interface UseAxleOptions<V = any, R = any, P = Record<string, any>, D = Record<s
   resetValue?: boolean;
   cloneResetValue?: boolean | ((value: V) => V);
   abortOnUnmount?: boolean;
+  abortPrevious?: boolean;
   cacheKey?: string | (() => string);
   cacheTime?: number;
   config?: AxleRequestConfig<D> | (() => AxleRequestConfig<D>);
   watch?: WatchOptions;
-  pollingInterval?: number;
+  pollingInterval?: number | (() => number | null | undefined);
+  pollingSilent?: boolean;
   pollingOnHidden?: boolean;
   pollingOnDeactivated?: boolean;
   refreshOnWindowFocus?: boolean;
@@ -68,6 +71,8 @@ interface CreateUseAxleOptions {
   axle: AxleInstance;
   immediate?: boolean;
   abortOnUnmount?: boolean;
+  abortPrevious?: boolean;
+  pollingSilent?: boolean;
   cacheTime?: number;
   onTransform?(response: any, refs: any): any;
 }

package/dist/use.mjs

@@ -1,3 +1,4 @@
+import { isCancel } from "axios";
 import { isFunction } from "rattail";
 import { getCurrentInstance, onActivated, onDeactivated, onMounted, onUnmounted, ref, watch } from "vue";
 //#region src/use.ts
@@ -11,9 +12,9 @@ function cleanupCacheBuffer() {
 	});
 }
 function createUseAxle(options) {
-	const { axle, onTransform: defaultOnTransform, immediate: defaultImmediate = true, abortOnUnmount: defaultAbortOnUnmount = true, cacheTime: defaultCacheTime = Infinity } = options;
+	const { axle, onTransform: defaultOnTransform, immediate: defaultImmediate = true, abortOnUnmount: defaultAbortOnUnmount = true, abortPrevious: defaultAbortPrevious = false, pollingSilent: defaultPollingSilent = false, cacheTime: defaultCacheTime = Infinity } = options;
 	const useAxle = (options) => {
-		const { url: initialUrlOrGetter, method, immediate = defaultImmediate, abortOnUnmount = defaultAbortOnUnmount, cacheTime = defaultCacheTime, cacheKey, pollingInterval, pollingOnHidden = true, pollingOnDeactivated = false, refreshOnWindowFocus = false, value: initialValue, resetValue: initialResetValue, cloneResetValue: initialCloneResetValue, params: initialParamsOrGetter, config: initialConfigOrGetter, watch: watchOptions, runnable = () => true, onBefore = () => {}, onAfter = () => {}, onTransform = defaultOnTransform ?? ((response) => response), onSuccess = () => {}, onError = () => {} } = options;
+		const { url: initialUrlOrGetter, method, immediate = defaultImmediate, abortOnUnmount = defaultAbortOnUnmount, abortPrevious = defaultAbortPrevious, cacheTime = defaultCacheTime, cacheKey, pollingInterval, pollingSilent = defaultPollingSilent, pollingOnHidden = true, pollingOnDeactivated = false, refreshOnWindowFocus = false, value: initialValue, resetValue: initialResetValue, cloneResetValue: initialCloneResetValue, params: initialParamsOrGetter, config: initialConfigOrGetter, watch: watchOptions, runnable = () => true, onBefore = () => {}, onAfter = () => {}, onTransform = defaultOnTransform ?? ((response) => response), onSuccess = () => {}, onError = () => {} } = options;
 		const value = ref(initialValue);
 		const loading = ref(false);
 		const error = ref();
@@ -40,14 +41,22 @@ function createUseAxle(options) {
 			cancelPolling
 		};
 		let controller = new AbortController();
+		let latestRunId = 0;
+		let cachedRequest;
 		let pollingTimer = null;
+		let running = false;
 		let deactivated = false;
 		let hidden = false;
 		let unmounted = false;
 		const run = Object.assign(async (options = {}) => {
 			if (!runnable() || abortOnUnmount && unmounted) return;
+			if (abortPrevious && !isCachedRequestPending()) controller.abort();
+			if (abortPrevious) cachedRequest = void 0;
+			if (abortPrevious || controller.signal.aborted) controller = new AbortController();
+			const runId = ++latestRunId;
+			const runController = controller;
+			running = true;
 			pollingCanceled.value = false;
-			if (controller.signal.aborted) controller = new AbortController();
 			if ((options.resetValue ?? initialResetValue ?? false) === true) resetValue(options);
 			uploadProgress.value = 0;
 			downloadProgress.value = 0;
@@ -56,7 +65,7 @@ function createUseAxle(options) {
 			const config = options.config ?? normalizeValueGetter(initialConfigOrGetter);
 			const normalizedCacheKey = cacheKey ? normalizeValueGetter(cacheKey) : void 0;
 			onBefore(refs);
-			loading.value = true;
+			loading.value = !options.silent;
 			try {
 				cleanupCacheBuffer();
 				const response = await getResponse();
@@ -65,37 +74,53 @@ function createUseAxle(options) {
 					cache.response = response;
 					cache.expiredTime = Date.now() + cacheTime;
 				}
-				value.value = await onTransform(response, refs);
+				if (!isLatestRun()) return response;
+				const transformedValue = await onTransform(response, refs);
+				if (!isLatestRun()) return response;
+				value.value = transformedValue;
 				error.value = void 0;
 				onSuccess(response, refs);
 				loading.value = false;
 				onAfter(refs);
 				return response;
 			} catch (responseError) {
+				if (!isLatestRun()) throw responseError;
 				error.value = responseError;
 				onError(responseError, refs);
 				loading.value = false;
 				onAfter(refs);
 				throw responseError;
 			} finally {
-				clearPolling();
-				startPolling();
+				if (isLatestRun()) {
+					running = false;
+					clearPolling();
+					startPolling();
+				}
+			}
+			function isLatestRun() {
+				return !abortPrevious || runId === latestRunId;
 			}
 			function getResponse() {
 				if (shouldUseCache(normalizedCacheKey)) return JSON.parse(JSON.stringify(cacheBuffer.get(normalizedCacheKey).response));
 				if (shouldAwaitCachePromise(normalizedCacheKey)) return cacheBuffer.get(normalizedCacheKey).promise;
 				const promise = fetchResponse();
-				if (shouldSetCachePromise(normalizedCacheKey)) cacheBuffer.set(normalizedCacheKey, { promise });
+				if (shouldSetCachePromise(normalizedCacheKey)) {
+					cacheBuffer.set(normalizedCacheKey, { promise });
+					cachedRequest = {
+						key: normalizedCacheKey,
+						promise
+					};
+				}
 				return promise;
 			}
 			function fetchResponse() {
 				return axle[method](url, params, {
-					signal: controller.signal,
+					signal: runController.signal,
 					onUploadProgress(event) {
-						uploadProgress.value = event.progress ?? 0;
+						if (isLatestRun()) uploadProgress.value = event.progress ?? 0;
 					},
 					onDownloadProgress(event) {
-						downloadProgress.value = event.progress ?? 0;
+						if (isLatestRun()) downloadProgress.value = event.progress ?? 0;
 					},
 					...config
 				});
@@ -163,12 +188,20 @@ function createUseAxle(options) {
 					runWithInitialConfig();
 				});
 			}
+			if (isFunction(pollingInterval)) watch(pollingInterval, () => {
+				clearPolling();
+				startPolling();
+			});
 		}
-		function runWithInitialConfig() {
+		function runWithInitialConfig({ silent = false } = {}) {
 			return run({
 				url: normalizeValueGetter(initialUrlOrGetter),
 				params: normalizeValueGetter(initialParamsOrGetter),
-				config: normalizeValueGetter(initialConfigOrGetter)
+				config: normalizeValueGetter(initialConfigOrGetter),
+				silent
+			}).catch((runError) => {
+				if (isCancel(runError)) return;
+				throw runError;
 			});
 		}
 		function resetValue(options = {}) {
@@ -176,6 +209,13 @@ function createUseAxle(options) {
 		}
 		function abort() {
 			controller.abort();
+			if (isCachedRequestPending()) cacheBuffer.delete(cachedRequest.key);
+			cachedRequest = void 0;
+		}
+		function isCachedRequestPending() {
+			if (!cachedRequest) return false;
+			const buffer = cacheBuffer.get(cachedRequest.key);
+			return buffer?.promise === cachedRequest.promise && buffer.response == null;
 		}
 		function addWindowFocusListener() {
 			if (typeof window !== "undefined") window.addEventListener("focus", handleWindowFocus);
@@ -198,10 +238,12 @@ function createUseAxle(options) {
 			hidden ? clearPolling() : startPolling();
 		}
 		function startPolling() {
-			if (pollingInterval == null || pollingCanceled.value || pollingTimer != null || deactivated && !pollingOnDeactivated || hidden && !pollingOnHidden) return;
+			const interval = normalizeValueGetter(pollingInterval);
+			if (interval == null || running || pollingCanceled.value || pollingTimer != null || deactivated && !pollingOnDeactivated || hidden && !pollingOnHidden) return;
 			pollingTimer = setTimeout(() => {
-				runWithInitialConfig();
-			}, pollingInterval);
+				pollingTimer = null;
+				runWithInitialConfig({ silent: pollingSilent });
+			}, interval);
 		}
 		function clearPolling() {
 			if (pollingTimer == null) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/axle",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Progressive request tool based on axios",
   "keywords": [
     "axios",
@@ -56,21 +56,34 @@
     "crypto-js": "^4.2.0",
     "lodash": "4.17.21",
     "qs": "^6.11.0",
-    "rattail": "^1.8.1"
+    "rattail": "^2.0.3"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.2.1",
     "@types/lodash": "4.14.202",
     "@types/qs": "^6.9.7",
-    "typescript": "^5.1.5",
-    "vite-plus": "^0.1.16",
-    "vue": "3.3.4"
+    "oxc-minify": "^0.125.0",
+    "typescript": "5.3.3",
+    "vite-plus": "0.1.18",
+    "vitepress": "2.0.0-alpha.17",
+    "vue": "3.5.32"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
   },
+  "engines": {
+    "pnpm": ">=10.0.0"
+  },
   "scripts": {
     "build": "vp pack",
-    "dev": "vp pack --watch"
+    "clean": "rt clean",
+    "dev": "vp pack --watch",
+    "docs:build": "vitepress build docs",
+    "docs:dev": "vitepress dev docs",
+    "docs:preview": "vitepress preview docs",
+    "lint": "vp lint --fix",
+    "format": "vp fmt",
+    "release": "pnpm build && rt release",
+    "test": "vp test run"
   }
 }