@varlet/axle 0.11.2 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/README.zh-CN.md +9 -0
- package/lib/api.cjs +8 -2
- package/lib/api.d.cts +15 -4
- package/lib/api.d.ts +15 -4
- package/lib/api.js +6 -2
- package/lib/index.cjs +16 -14
- package/lib/index.d.cts +24 -19
- package/lib/index.d.ts +24 -19
- package/lib/index.js +13 -11
- package/lib/use.cjs +253 -80
- package/lib/use.d.cts +31 -6
- package/lib/use.d.ts +31 -6
- package/lib/use.js +258 -86
- package/package.json +1 -3
package/lib/use.js
CHANGED
|
@@ -3,27 +3,29 @@ import {
|
|
|
3
3
|
} from "./chunk-G2ADBYYC.js";
|
|
4
4
|
|
|
5
5
|
// src/use.ts
|
|
6
|
-
import { getCurrentInstance, onUnmounted, ref as ref3 } from "vue";
|
|
6
|
+
import { getCurrentInstance, onActivated, onDeactivated, onMounted, onUnmounted, ref as ref3, watch as watch3 } from "vue";
|
|
7
7
|
import { isFunction } from "rattail";
|
|
8
8
|
|
|
9
|
-
// src/composables/
|
|
10
|
-
import {
|
|
11
|
-
function
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
9
|
+
// src/composables/useAverageProgress.ts
|
|
10
|
+
import { ref, watch } from "vue";
|
|
11
|
+
function useAverageProgress(...progressCollection) {
|
|
12
|
+
const averageProgress = ref(0);
|
|
13
|
+
watch(
|
|
14
|
+
() => progressCollection.map((progress) => progress.value),
|
|
15
|
+
(newProgressCollection) => {
|
|
16
|
+
const total = newProgressCollection.reduce((total2, progress) => total2 + progress, 0);
|
|
17
|
+
averageProgress.value = total / progressCollection.length;
|
|
18
|
+
},
|
|
19
|
+
{ immediate: true }
|
|
20
|
+
);
|
|
21
|
+
return averageProgress;
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
// src/composables/useHasLoading.ts
|
|
23
|
-
import { ref, watch } from "vue";
|
|
25
|
+
import { ref as ref2, watch as watch2 } from "vue";
|
|
24
26
|
function useHasLoading(...loadings) {
|
|
25
|
-
const hasLoading =
|
|
26
|
-
|
|
27
|
+
const hasLoading = ref2(false);
|
|
28
|
+
watch2(
|
|
27
29
|
() => loadings.map((loading) => loading.value),
|
|
28
30
|
(newLoadings) => {
|
|
29
31
|
hasLoading.value = newLoadings.some(Boolean);
|
|
@@ -33,31 +35,38 @@ function useHasLoading(...loadings) {
|
|
|
33
35
|
return hasLoading;
|
|
34
36
|
}
|
|
35
37
|
|
|
36
|
-
// src/composables/
|
|
37
|
-
import {
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
()
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
);
|
|
48
|
-
return averageProgress;
|
|
38
|
+
// src/composables/useValues.ts
|
|
39
|
+
import { computed } from "vue";
|
|
40
|
+
function useValues(...valueCollection) {
|
|
41
|
+
return computed({
|
|
42
|
+
get: () => valueCollection.map((value) => value.value),
|
|
43
|
+
set(values) {
|
|
44
|
+
valueCollection.forEach((value, index) => {
|
|
45
|
+
value.value = values[index];
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
// src/use.ts
|
|
52
52
|
function normalizeValueGetter(valueGetter) {
|
|
53
53
|
return isFunction(valueGetter) ? valueGetter() : valueGetter;
|
|
54
54
|
}
|
|
55
|
+
var cacheBuffer = /* @__PURE__ */ new Map();
|
|
56
|
+
function cleanupCacheBuffer() {
|
|
57
|
+
cacheBuffer.forEach((value, key) => {
|
|
58
|
+
if (value.expiredTime && Date.now() >= value.expiredTime) {
|
|
59
|
+
cacheBuffer.delete(key);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}
|
|
55
63
|
function createUseAxle(options) {
|
|
56
64
|
const {
|
|
57
65
|
axle,
|
|
58
66
|
onTransform: defaultOnTransform,
|
|
59
67
|
immediate: defaultImmediate = true,
|
|
60
|
-
abortOnUnmount: defaultAbortOnUnmount = true
|
|
68
|
+
abortOnUnmount: defaultAbortOnUnmount = true,
|
|
69
|
+
cacheTime: defaultCacheTime = Infinity
|
|
61
70
|
} = options;
|
|
62
71
|
const useAxle = (options2) => {
|
|
63
72
|
const {
|
|
@@ -65,11 +74,19 @@ function createUseAxle(options) {
|
|
|
65
74
|
method,
|
|
66
75
|
immediate = defaultImmediate,
|
|
67
76
|
abortOnUnmount = defaultAbortOnUnmount,
|
|
77
|
+
cacheTime = defaultCacheTime,
|
|
78
|
+
cacheKey,
|
|
79
|
+
pollingInterval,
|
|
80
|
+
pollingOnHidden = true,
|
|
81
|
+
pollingOnDeactivated = false,
|
|
82
|
+
refreshOnWindowFocus = false,
|
|
68
83
|
value: initialValue,
|
|
69
84
|
resetValue: initialResetValue,
|
|
70
85
|
cloneResetValue: initialCloneResetValue,
|
|
71
86
|
params: initialParamsOrGetter,
|
|
72
87
|
config: initialConfigOrGetter,
|
|
88
|
+
watch: watchOptions,
|
|
89
|
+
runnable = () => true,
|
|
73
90
|
onBefore = () => {
|
|
74
91
|
},
|
|
75
92
|
onAfter = () => {
|
|
@@ -85,86 +102,182 @@ function createUseAxle(options) {
|
|
|
85
102
|
const error = ref3();
|
|
86
103
|
const downloadProgress = ref3(0);
|
|
87
104
|
const uploadProgress = ref3(0);
|
|
105
|
+
const pollingCanceled = ref3(false);
|
|
88
106
|
const refs = {
|
|
89
107
|
value,
|
|
90
108
|
loading,
|
|
91
109
|
error,
|
|
92
110
|
downloadProgress,
|
|
93
|
-
uploadProgress
|
|
111
|
+
uploadProgress,
|
|
112
|
+
pollingCanceled
|
|
94
113
|
};
|
|
95
114
|
const extra = {
|
|
96
115
|
uploadProgress,
|
|
97
116
|
downloadProgress,
|
|
98
117
|
loading,
|
|
99
118
|
error,
|
|
119
|
+
pollingCanceled,
|
|
100
120
|
abort,
|
|
101
|
-
resetValue
|
|
121
|
+
resetValue,
|
|
122
|
+
invalidateCache,
|
|
123
|
+
cancelPolling
|
|
102
124
|
};
|
|
103
125
|
let controller = new AbortController();
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
126
|
+
let pollingTimer = null;
|
|
127
|
+
let deactivated = false;
|
|
128
|
+
let hidden = false;
|
|
129
|
+
const run = Object.assign(async (options3 = {}) => {
|
|
130
|
+
var _a, _b, _c, _d, _e;
|
|
131
|
+
if (!runnable()) {
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
pollingCanceled.value = false;
|
|
135
|
+
if (controller.signal.aborted) {
|
|
136
|
+
controller = new AbortController();
|
|
137
|
+
}
|
|
138
|
+
const resetValueOption = (_b = (_a = options3.resetValue) != null ? _a : initialResetValue) != null ? _b : false;
|
|
139
|
+
if (resetValueOption === true) {
|
|
140
|
+
resetValue(options3);
|
|
141
|
+
}
|
|
142
|
+
uploadProgress.value = 0;
|
|
143
|
+
downloadProgress.value = 0;
|
|
144
|
+
const url = (_c = options3.url) != null ? _c : normalizeValueGetter(initialUrlOrGetter);
|
|
145
|
+
const params = (_d = options3.params) != null ? _d : normalizeValueGetter(initialParamsOrGetter);
|
|
146
|
+
const config = (_e = options3.config) != null ? _e : normalizeValueGetter(initialConfigOrGetter);
|
|
147
|
+
const normalizedCacheKey = cacheKey ? normalizeValueGetter(cacheKey) : void 0;
|
|
148
|
+
onBefore(refs);
|
|
149
|
+
loading.value = true;
|
|
150
|
+
try {
|
|
151
|
+
cleanupCacheBuffer();
|
|
152
|
+
const response = await getResponse();
|
|
153
|
+
if (shouldSetCacheResponse(normalizedCacheKey)) {
|
|
154
|
+
const cache = cacheBuffer.get(normalizedCacheKey);
|
|
155
|
+
cache.response = response;
|
|
156
|
+
cache.expiredTime = Date.now() + cacheTime;
|
|
109
157
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
158
|
+
value.value = await onTransform(response, refs);
|
|
159
|
+
error.value = void 0;
|
|
160
|
+
onSuccess(response, refs);
|
|
161
|
+
loading.value = false;
|
|
162
|
+
onAfter(refs);
|
|
163
|
+
return response;
|
|
164
|
+
} catch (responseError) {
|
|
165
|
+
error.value = responseError;
|
|
166
|
+
onError(responseError, refs);
|
|
167
|
+
loading.value = false;
|
|
168
|
+
onAfter(refs);
|
|
169
|
+
throw responseError;
|
|
170
|
+
} finally {
|
|
171
|
+
clearPolling();
|
|
172
|
+
startPolling();
|
|
173
|
+
}
|
|
174
|
+
function getResponse() {
|
|
175
|
+
if (shouldUseCache(normalizedCacheKey)) {
|
|
176
|
+
return JSON.parse(JSON.stringify(cacheBuffer.get(normalizedCacheKey).response));
|
|
113
177
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
const url = (_c = options3.url) != null ? _c : normalizeValueGetter(initialUrlOrGetter);
|
|
117
|
-
const params = (_d = options3.params) != null ? _d : normalizeValueGetter(initialParamsOrGetter);
|
|
118
|
-
const config = (_e = options3.config) != null ? _e : normalizeValueGetter(initialConfigOrGetter);
|
|
119
|
-
onBefore(refs);
|
|
120
|
-
loading.value = true;
|
|
121
|
-
try {
|
|
122
|
-
const response = await axle[method](url, params, __spreadValues({
|
|
123
|
-
signal: controller.signal,
|
|
124
|
-
onUploadProgress(event) {
|
|
125
|
-
var _a2;
|
|
126
|
-
uploadProgress.value = (_a2 = event.progress) != null ? _a2 : 0;
|
|
127
|
-
},
|
|
128
|
-
onDownloadProgress(event) {
|
|
129
|
-
var _a2;
|
|
130
|
-
downloadProgress.value = (_a2 = event.progress) != null ? _a2 : 0;
|
|
131
|
-
}
|
|
132
|
-
}, config));
|
|
133
|
-
value.value = await onTransform(response, refs);
|
|
134
|
-
error.value = void 0;
|
|
135
|
-
onSuccess(response, refs);
|
|
136
|
-
loading.value = false;
|
|
137
|
-
onAfter(refs);
|
|
138
|
-
return response;
|
|
139
|
-
} catch (responseError) {
|
|
140
|
-
error.value = responseError;
|
|
141
|
-
onError(responseError, refs);
|
|
142
|
-
loading.value = false;
|
|
143
|
-
onAfter(refs);
|
|
144
|
-
throw responseError;
|
|
178
|
+
if (shouldAwaitCachePromise(normalizedCacheKey)) {
|
|
179
|
+
return cacheBuffer.get(normalizedCacheKey).promise;
|
|
145
180
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
181
|
+
const promise = fetchResponse();
|
|
182
|
+
if (shouldSetCachePromise(normalizedCacheKey)) {
|
|
183
|
+
cacheBuffer.set(normalizedCacheKey, { promise });
|
|
184
|
+
}
|
|
185
|
+
return promise;
|
|
186
|
+
}
|
|
187
|
+
function fetchResponse() {
|
|
188
|
+
return axle[method](url, params, __spreadValues({
|
|
189
|
+
signal: controller.signal,
|
|
190
|
+
onUploadProgress(event) {
|
|
191
|
+
var _a2;
|
|
192
|
+
uploadProgress.value = (_a2 = event.progress) != null ? _a2 : 0;
|
|
193
|
+
},
|
|
194
|
+
onDownloadProgress(event) {
|
|
195
|
+
var _a2;
|
|
196
|
+
downloadProgress.value = (_a2 = event.progress) != null ? _a2 : 0;
|
|
197
|
+
}
|
|
198
|
+
}, config));
|
|
199
|
+
}
|
|
200
|
+
function shouldUseCache(key) {
|
|
201
|
+
if (!key || !cacheBuffer.has(key)) {
|
|
202
|
+
return false;
|
|
203
|
+
}
|
|
204
|
+
const buffer = cacheBuffer.get(key);
|
|
205
|
+
return buffer.response != null;
|
|
206
|
+
}
|
|
207
|
+
function shouldAwaitCachePromise(key) {
|
|
208
|
+
if (!key || !cacheBuffer.has(key)) {
|
|
209
|
+
return false;
|
|
210
|
+
}
|
|
211
|
+
const buffer = cacheBuffer.get(key);
|
|
212
|
+
return buffer.promise;
|
|
213
|
+
}
|
|
214
|
+
function shouldSetCachePromise(key) {
|
|
215
|
+
if (!key || cacheBuffer.has(key)) {
|
|
216
|
+
return false;
|
|
217
|
+
}
|
|
218
|
+
return true;
|
|
219
|
+
}
|
|
220
|
+
function shouldSetCacheResponse(key) {
|
|
221
|
+
if (!key || !cacheBuffer.has(key)) {
|
|
222
|
+
return false;
|
|
223
|
+
}
|
|
224
|
+
const buffer = cacheBuffer.get(key);
|
|
225
|
+
return buffer.response == null;
|
|
226
|
+
}
|
|
227
|
+
}, extra);
|
|
156
228
|
if (immediate) {
|
|
157
|
-
|
|
229
|
+
runWithInitialConfig();
|
|
230
|
+
}
|
|
231
|
+
if (getCurrentInstance()) {
|
|
232
|
+
onActivated(() => {
|
|
233
|
+
deactivated = false;
|
|
234
|
+
addVisibilityChangeListener();
|
|
235
|
+
addWindowFocusListener();
|
|
236
|
+
startPolling();
|
|
237
|
+
});
|
|
238
|
+
onMounted(() => {
|
|
239
|
+
addVisibilityChangeListener();
|
|
240
|
+
addWindowFocusListener();
|
|
241
|
+
});
|
|
242
|
+
onDeactivated(() => {
|
|
243
|
+
deactivated = true;
|
|
244
|
+
removeVisibilityChangeListener();
|
|
245
|
+
removeWindowFocusListener();
|
|
246
|
+
clearPolling();
|
|
247
|
+
});
|
|
248
|
+
onUnmounted(() => {
|
|
249
|
+
removeVisibilityChangeListener();
|
|
250
|
+
removeWindowFocusListener();
|
|
251
|
+
cancelPolling();
|
|
252
|
+
});
|
|
253
|
+
if (abortOnUnmount) {
|
|
254
|
+
onUnmounted(() => {
|
|
255
|
+
abort();
|
|
256
|
+
});
|
|
257
|
+
}
|
|
258
|
+
if (watchOptions) {
|
|
259
|
+
const normalizedWatchOptions = watchOptions === true ? { params: true, config: true } : __spreadValues({ params: false, config: false }, watchOptions);
|
|
260
|
+
const enableWatchParams = isFunction(initialParamsOrGetter) && normalizedWatchOptions.params;
|
|
261
|
+
const enableWatchConfig = isFunction(initialConfigOrGetter) && normalizedWatchOptions.config;
|
|
262
|
+
watch3(
|
|
263
|
+
() => [
|
|
264
|
+
enableWatchParams ? normalizeValueGetter(initialParamsOrGetter) : void 0,
|
|
265
|
+
enableWatchConfig ? normalizeValueGetter(initialConfigOrGetter) : void 0,
|
|
266
|
+
normalizedWatchOptions._custom ? normalizedWatchOptions._custom() : void 0
|
|
267
|
+
],
|
|
268
|
+
() => {
|
|
269
|
+
runWithInitialConfig();
|
|
270
|
+
}
|
|
271
|
+
);
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
function runWithInitialConfig() {
|
|
275
|
+
return run({
|
|
158
276
|
url: normalizeValueGetter(initialUrlOrGetter),
|
|
159
277
|
params: normalizeValueGetter(initialParamsOrGetter),
|
|
160
278
|
config: normalizeValueGetter(initialConfigOrGetter)
|
|
161
279
|
});
|
|
162
280
|
}
|
|
163
|
-
if (abortOnUnmount && getCurrentInstance()) {
|
|
164
|
-
onUnmounted(() => {
|
|
165
|
-
abort();
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
281
|
function resetValue(options3 = {}) {
|
|
169
282
|
var _a, _b;
|
|
170
283
|
const cloneResetValue = (_b = (_a = options3.cloneResetValue) != null ? _a : initialCloneResetValue) != null ? _b : false;
|
|
@@ -174,11 +287,70 @@ function createUseAxle(options) {
|
|
|
174
287
|
function abort() {
|
|
175
288
|
controller.abort();
|
|
176
289
|
}
|
|
290
|
+
function addWindowFocusListener() {
|
|
291
|
+
if (typeof window !== "undefined") {
|
|
292
|
+
window.addEventListener("focus", handleWindowFocus);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
function removeWindowFocusListener() {
|
|
296
|
+
if (typeof window !== "undefined") {
|
|
297
|
+
window.removeEventListener("focus", handleWindowFocus);
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
function handleWindowFocus() {
|
|
301
|
+
if (refreshOnWindowFocus) {
|
|
302
|
+
runWithInitialConfig();
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
function addVisibilityChangeListener() {
|
|
306
|
+
if (typeof document !== "undefined") {
|
|
307
|
+
document.addEventListener("visibilitychange", handleVisibilityChange);
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
function removeVisibilityChangeListener() {
|
|
311
|
+
if (typeof document !== "undefined") {
|
|
312
|
+
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
function handleVisibilityChange() {
|
|
316
|
+
hidden = document.visibilityState === "hidden";
|
|
317
|
+
if (pollingOnHidden) {
|
|
318
|
+
return;
|
|
319
|
+
}
|
|
320
|
+
hidden ? clearPolling() : startPolling();
|
|
321
|
+
}
|
|
322
|
+
function startPolling() {
|
|
323
|
+
if (pollingInterval == null || pollingCanceled.value || pollingTimer != null || deactivated && !pollingOnDeactivated || hidden && !pollingOnHidden) {
|
|
324
|
+
return;
|
|
325
|
+
}
|
|
326
|
+
pollingTimer = setTimeout(() => {
|
|
327
|
+
runWithInitialConfig();
|
|
328
|
+
}, pollingInterval);
|
|
329
|
+
}
|
|
330
|
+
function clearPolling() {
|
|
331
|
+
if (pollingTimer == null) {
|
|
332
|
+
return;
|
|
333
|
+
}
|
|
334
|
+
clearTimeout(pollingTimer);
|
|
335
|
+
pollingTimer = null;
|
|
336
|
+
}
|
|
337
|
+
function cancelPolling() {
|
|
338
|
+
clearPolling();
|
|
339
|
+
pollingCanceled.value = true;
|
|
340
|
+
}
|
|
341
|
+
function invalidateCache() {
|
|
342
|
+
const normalizedCacheKey = cacheKey ? normalizeValueGetter(cacheKey) : void 0;
|
|
343
|
+
if (!normalizedCacheKey || !cacheBuffer.has(normalizedCacheKey)) {
|
|
344
|
+
return;
|
|
345
|
+
}
|
|
346
|
+
cacheBuffer.delete(normalizedCacheKey);
|
|
347
|
+
}
|
|
177
348
|
return [value, run, extra];
|
|
178
349
|
};
|
|
179
350
|
return useAxle;
|
|
180
351
|
}
|
|
181
352
|
export {
|
|
353
|
+
cleanupCacheBuffer,
|
|
182
354
|
createUseAxle,
|
|
183
355
|
normalizeValueGetter,
|
|
184
356
|
useAverageProgress,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@varlet/axle",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"description": "Progressive request tool based on axios",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"axle",
|
|
@@ -55,14 +55,12 @@
|
|
|
55
55
|
"axios": "^1.7.3",
|
|
56
56
|
"crypto-js": "^4.2.0",
|
|
57
57
|
"lodash": "4.17.21",
|
|
58
|
-
"minimatch": "^9.0.3",
|
|
59
58
|
"qs": "^6.11.0",
|
|
60
59
|
"rattail": "1.0.0"
|
|
61
60
|
},
|
|
62
61
|
"devDependencies": {
|
|
63
62
|
"@types/crypto-js": "^4.2.1",
|
|
64
63
|
"@types/lodash": "4.14.202",
|
|
65
|
-
"@types/minimatch": "^5.1.2",
|
|
66
64
|
"@types/qs": "^6.9.7",
|
|
67
65
|
"tsup": "7.2.0",
|
|
68
66
|
"typescript": "^5.1.5",
|