Skip to content

Commit ec1bbab

Browse files
haoziqaqhaoziqaq
committed
feat: runner enhancement
1 parent 053e95f commit ec1bbab

File tree

4 files changed

+219
-90
lines changed

4 files changed

+219
-90
lines changed

‎README.md

+63-2
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,14 @@ const useAxle = createUseAxle({
301301
onTransform: (response) => response,
302302
})
303303
304-
const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort, resetValue }] = useAxle({
304+
const [
305+
// response data
306+
users,
307+
// request runner/invoker
308+
getUsers,
309+
// extra properties
310+
{ loading, error, uploadProgress, downloadProgress, abort, resetValue }
311+
] = useAxle({
305312
// Request initial value
306313
value: [],
307314
// Request method
@@ -407,7 +414,7 @@ function sendAllRequest() {
407414
</template>
408415
```
409416

410-
### Enhancement
417+
### API Definition Enhancement
411418

412419
`createApi` is supported since `v0.9.0`, which is used to define APIs.
413420

@@ -494,3 +501,57 @@ async function handleDelete(id: string) {
494501
}
495502
}
496503
```
504+
505+
### Runner Enhancement
506+
507+
Since `v0.10.0`, the `runner` will include all the extra properties, so we can further simplify the work.
508+
509+
before:
510+
511+
```html
512+
<script setup>
513+
const [users, getUsers, { loading: isUsersLoading }] = useAxle({
514+
value: [],
515+
method: 'get',
516+
url: '/user',
517+
})
518+
519+
const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
520+
value: [],
521+
method: 'get',
522+
url: '/post',
523+
})
524+
</script>
525+
526+
<template>
527+
<span>{{ isUsersLoading ? 'loading...' : users }}</span>
528+
<span>{{ isPostsLoading ? 'loading...' : posts }}</span>
529+
<button @click="getUsers">Send Request</button>
530+
<button @click="getPosts">Send Request</button>
531+
</template>
532+
```
533+
534+
after:
535+
536+
```html
537+
<script setup>
538+
const [users, getUsers] = useAxle({
539+
value: [],
540+
method: 'get',
541+
url: '/user',
542+
})
543+
544+
const [posts, getPosts] = useAxle({
545+
value: [],
546+
method: 'get',
547+
url: '/post',
548+
})
549+
</script>
550+
551+
<template>
552+
<span>{{ getUsers.loading ? 'loading...' : users }}</span>
553+
<span>{{ getPosts.loading ? 'loading...' : posts }}</span>
554+
<button @click="getUsers">Send Request</button>
555+
<button @click="getPosts">Send Request</button>
556+
</template>
557+
```

‎README.zh-CN.md

+63-2
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,14 @@ const useAxle = createUseAxle({
301301
onTransform: (response) => response,
302302
})
303303
304-
const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
304+
const [
305+
// 请求数据
306+
users,
307+
// 请求触发器
308+
getUsers,
309+
// 附加属性
310+
{ loading, error, uploadProgress, downloadProgress, abort }
311+
] = useAxle({
305312
// 请求初始化数据
306313
value: [],
307314
// 请求方法
@@ -407,7 +414,7 @@ function sendAllRequest() {
407414
</template>
408415
```
409416

410-
### 增强
417+
### API 定义增强
411418

412419
从 `0.9.0` 开始支持 `createApi`，以增强 API 定义能力。
413420

@@ -494,3 +501,57 @@ async function handleDelete(id: string) {
494501
}
495502
}
496503
```
504+
505+
### 请求触发器增强
506+
507+
从 `v0.10.0` 开始, 请求触发器将包含附加属性中的全部属性。
508+
509+
增强前:
510+
511+
```html
512+
<script setup>
513+
const [users, getUsers, { loading: isUsersLoading }] = useAxle({
514+
value: [],
515+
method: 'get',
516+
url: '/user',
517+
})
518+
519+
const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
520+
value: [],
521+
method: 'get',
522+
url: '/post',
523+
})
524+
</script>
525+
526+
<template>
527+
<span>{{ isUsersLoading ? 'loading...' : users }}</span>
528+
<span>{{ isPostsLoading ? 'loading...' : posts }}</span>
529+
<button @click="getUsers">Send Request</button>
530+
<button @click="getPosts">Send Request</button>
531+
</template>
532+
```
533+
534+
增强后:
535+
536+
```html
537+
<script setup>
538+
const [users, getUsers] = useAxle({
539+
value: [],
540+
method: 'get',
541+
url: '/user',
542+
})
543+
544+
const [posts, getPosts] = useAxle({
545+
value: [],
546+
method: 'get',
547+
url: '/post',
548+
})
549+
</script>
550+
551+
<template>
552+
<span>{{ getUsers.loading ? 'loading...' : users }}</span>
553+
<span>{{ getPosts.loading ? 'loading...' : posts }}</span>
554+
<button @click="getUsers">Send Request</button>
555+
<button @click="getPosts">Send Request</button>
556+
</template>
557+
```

‎packages/axle/src/use.ts

+87-80
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,14 @@ export interface RunOptions<V, P> {
1010
cloneResetValue?: boolean | ((value: V) => V)
1111
}
1212

13-
export type Run<V, R, P> = (options?: RunOptions<V, P>) => Promise<R>
14-
13+
export type UseAxleExtra<V> = {
14+
uploadProgress: Ref<number>
15+
downloadProgress: Ref<number>
16+
loading: Ref<boolean>
17+
error: Ref<Error | undefined>
18+
abort(): void
19+
resetValue(options?: ResetValueOptions<V>): void
20+
}
1521
export interface UseAxleRefs<V> {
1622
value: Ref<V>
1723
loading: Ref<boolean>
@@ -20,6 +26,10 @@ export interface UseAxleRefs<V> {
2026
downloadProgress: Ref<number>
2127
}
2228

29+
export type Run<V, R, P> = {
30+
(options?: RunOptions<V, P>): Promise<R>
31+
} & UseAxleExtra<V>
32+
2333
export interface UseAxleOptions<V = any, R = any, P = Record<string, any>> {
2434
url: string | (() => string)
2535
method: RunnerMethod
@@ -40,18 +50,7 @@ export interface ResetValueOptions<V> {
4050
cloneResetValue?: boolean | ((value: V) => V)
4151
}
4252

43-
export type UseAxleInstance<V, R, P> = [
44-
value: Ref<V>,
45-
run: Run<V, R, P>,
46-
extra: {
47-
uploadProgress: Ref<number>
48-
downloadProgress: Ref<number>
49-
loading: Ref<boolean>
50-
error: Ref<Error | undefined>
51-
abort(): void
52-
resetValue(options?: ResetValueOptions<V>): void
53-
}
54-
]
53+
export type UseAxleInstance<V, R, P> = [value: Ref<V>, run: Run<V, R, P>, extra: UseAxleExtra<V>]
5554

5655
export interface CreateUseAxleOptions {
5756
axle: AxleInstance
@@ -104,75 +103,79 @@ export function createUseAxle(options: CreateUseAxleOptions) {
104103
uploadProgress,
105104
}
106105

107-
let controller = new AbortController()
108-
109-
const resetValue = (options: ResetValueOptions<V> = {}) => {
110-
const cloneResetValue = options.cloneResetValue ?? initialCloneResetValue ?? false
111-
const cloneFn =
112-
cloneResetValue === true
113-
? (v: V) => (v == null ? null : JSON.parse(JSON.stringify(v)))
114-
: isFunction(initialCloneResetValue)
115-
? initialCloneResetValue
116-
: (v: V) => v
117-
value.value = cloneFn(initialValue as V)
106+
const extra: UseAxleExtra<V> = {
107+
uploadProgress,
108+
downloadProgress,
109+
loading,
110+
error,
111+
abort,
112+
resetValue,
118113
}
119114

120-
const run: Run<V, R, P> = async (options: RunOptions<V, P> = {}) => {
121-
if (controller.signal.aborted) {
122-
controller = new AbortController()
123-
}
115+
let controller = new AbortController()
124116

125-
const resetValueOption = options.resetValue ?? initialResetValue ?? false
126-
if (resetValueOption === true) {
127-
resetValue(options)
128-
}
117+
const run: Run<V, R, P> = Object.assign(
118+
async (options: RunOptions<V, P> = {}) => {
119+
if (controller.signal.aborted) {
120+
controller = new AbortController()
121+
}
129122

130-
uploadProgress.value = 0
131-
downloadProgress.value = 0
123+
const resetValueOption = options.resetValue ?? initialResetValue ?? false
124+
if (resetValueOption === true) {
125+
resetValue(options)
126+
}
132127

133-
const url = options.url ?? normalizeValueGetter(initialUrlOrGetter)
134-
const params = options.params ?? normalizeValueGetter(initialParamsOrGetter)
135-
const config = options.config ?? normalizeValueGetter(initialConfigOrGetter)
128+
uploadProgress.value = 0
129+
downloadProgress.value = 0
136130

137-
onBefore(refs)
131+
const url = options.url ?? normalizeValueGetter(initialUrlOrGetter)
132+
const params = options.params ?? normalizeValueGetter(initialParamsOrGetter)
133+
const config = options.config ?? normalizeValueGetter(initialConfigOrGetter)
138134

139-
loading.value = true
135+
onBefore(refs)
140136

141-
try {
142-
const response = await axle[method](url, params, {
143-
signal: controller.signal,
137+
loading.value = true
144138

145-
onUploadProgress(event) {
146-
uploadProgress.value = event.progress ?? 0
147-
},
139+
try {
140+
const response = await axle[method](url, params, {
141+
signal: controller.signal,
148142

149-
onDownloadProgress(event) {
150-
downloadProgress.value = event.progress ?? 0
151-
},
143+
onUploadProgress(event) {
144+
uploadProgress.value = event.progress ?? 0
145+
},
152146

153-
...config,
154-
})
147+
onDownloadProgress(event) {
148+
downloadProgress.value = event.progress ?? 0
149+
},
155150

156-
value.value = await onTransform(response as R, refs)
157-
error.value = undefined
158-
onSuccess(response as R, refs)
159-
loading.value = false
160-
onAfter(refs)
151+
...config,
152+
})
161153

162-
return response as R
163-
} catch (responseError: any) {
164-
error.value = responseError as Error
165-
onError(responseError as Error, refs)
166-
loading.value = false
167-
onAfter(refs)
154+
value.value = await onTransform(response as R, refs)
155+
error.value = undefined
156+
onSuccess(response as R, refs)
157+
loading.value = false
158+
onAfter(refs)
168159

169-
throw responseError
170-
}
171-
}
160+
return response as R
161+
} catch (responseError: any) {
162+
error.value = responseError as Error
163+
onError(responseError as Error, refs)
164+
loading.value = false
165+
onAfter(refs)
172166

173-
const abort = () => {
174-
controller.abort()
175-
}
167+
throw responseError
168+
}
169+
},
170+
{
171+
uploadProgress,
172+
downloadProgress,
173+
loading,
174+
error,
175+
abort,
176+
resetValue,
177+
}
178+
)
176179

177180
if (immediate) {
178181
run({
@@ -182,18 +185,22 @@ export function createUseAxle(options: CreateUseAxleOptions) {
182185
})
183186
}
184187

185-
return [
186-
value,
187-
run,
188-
{
189-
loading,
190-
error,
191-
uploadProgress,
192-
downloadProgress,
193-
abort,
194-
resetValue,
195-
},
196-
]
188+
function resetValue(options: ResetValueOptions<V> = {}) {
189+
const cloneResetValue = options.cloneResetValue ?? initialCloneResetValue ?? false
190+
const cloneFn =
191+
cloneResetValue === true
192+
? (v: V) => (v == null ? null : JSON.parse(JSON.stringify(v)))
193+
: isFunction(initialCloneResetValue)
194+
? initialCloneResetValue
195+
: (v: V) => v
196+
value.value = cloneFn(initialValue as V)
197+
}
198+
199+
function abort() {
200+
controller.abort()
201+
}
202+
203+
return [value, run, extra]
197204
}
198205

199206
return useAxle

0 commit comments

Comments
 (0)