Skip to content

Commit 95bdbd6

Browse files
inhiblabinhiblab
authored
fix: 🔧 use-request injection warning & optimized code
fix: use-request injection warning & optimized code
2 parents e7addff + ee6b811 commit 95bdbd6

File tree

14 files changed

+256
-62
lines changed

14 files changed

+256
-62
lines changed

‎packages/hooks/src/useRequest/Fetch.ts

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
2121
constructor(
2222
public serviceRef: Ref<UseRequestService<TData, TParams>>,
2323
public options: UseRequestOptions<TData, TParams, any>,
24-
public setUpdateData: (s: any, key?: keyof UseRequestFetchState<TData, TParams>) => void,
24+
public setUpdateData: (
25+
currentState: unknown,
26+
key?: keyof UseRequestFetchState<TData, TParams>,
27+
) => void,
2528
public initState: Partial<UseRequestFetchState<TData, TParams>> = {},
2629
) {
2730
this.state = {
@@ -32,38 +35,61 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
3235
}
3336

3437
// 设置state
35-
setState(s: Partial<UseRequestFetchState<TData, TParams>> = {}) {
38+
setState(currentState: Partial<UseRequestFetchState<TData, TParams>> = {}) {
3639
this.state = {
3740
...this.state,
38-
...s,
41+
...currentState,
3942
}
4043
this.setUpdateData(this.state)
4144
}
4245

4346
/**
44-
*
45-
* @param data Result value `any`
47+
* should rename
48+
* @param data Result value `unknown`
4649
* @param key Result key `data`| `params` | `loading`| `error`
4750
*/
4851
setData(
49-
data: any,
52+
data: unknown,
53+
key?:
54+
| keyof UseRequestFetchState<TData, TParams>
55+
| (keyof UseRequestFetchState<TData, TParams>)[],
56+
) {
57+
console.warn("Please use 'setFetchState' instead of 'setData'")
58+
if (key instanceof Array) {
59+
key.forEach(k => {
60+
this.state[k as keyof UseRequestFetchState<TData, TParams>] = data as any
61+
this.setUpdateData(data, k)
62+
})
63+
} else {
64+
this.state[key as keyof UseRequestFetchState<TData, TParams>] = data as any
65+
this.setUpdateData(data, key)
66+
}
67+
}
68+
69+
/**
70+
*
71+
* @param data Result value `unknown`
72+
* @param key Result key `data`| `params` | `loading`| `error`
73+
*/
74+
setFetchState(
75+
data: unknown,
5076
key?:
5177
| keyof UseRequestFetchState<TData, TParams>
5278
| (keyof UseRequestFetchState<TData, TParams>)[],
5379
) {
5480
if (key instanceof Array) {
5581
key.forEach(k => {
56-
this.state[k as keyof UseRequestFetchState<TData, TParams>] = data
82+
this.state[k as keyof UseRequestFetchState<TData, TParams>] = data as any
5783
this.setUpdateData(data, k)
5884
})
5985
} else {
60-
this.state[key as keyof UseRequestFetchState<TData, TParams>] = data
86+
this.state[key as keyof UseRequestFetchState<TData, TParams>] = data as any
6187
this.setUpdateData(data, key)
6288
}
6389
}
6490

6591
// 遍历需要运行的插件，是一个回调函数，供插件获取fetch实例和在对应节点执行插件逻辑
66-
runPluginHandler(event: keyof UseRequestPluginReturn<TData, TParams>, ...rest: any[]) {
92+
runPluginHandler(event: keyof UseRequestPluginReturn<TData, TParams>, ...rest: unknown[]) {
6793
// @ts-ignore
6894
const r = (this.pluginImpls?.map(i => i[event]?.(...rest)) ?? [])?.filter(Boolean)
6995
// @ts-ignore
@@ -102,7 +128,7 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
102128
// replace service 开始请求，如果含有onRequest事件名
103129
let { servicePromise } = this.runPluginHandler('onRequest', this.serviceRef.value, params)
104130

105-
const requestReturn = (res: any) => {
131+
const requestReturnResponse = (res: any) => {
106132
// 取消了请求，count将与currentCount不一致，将发送空请求
107133
if (currentCount !== this.count) {
108134
return new Promise(() => {})
@@ -135,18 +161,18 @@ export default class Fetch<TData, TParams extends unknown[] = any> {
135161
if (!this.options.manual && this.options.refreshDeps === true) {
136162
watchEffect(async () => {
137163
if (unref(this.options.ready)) {
138-
this.setData(true, 'loading')
164+
this.setFetchState(true, 'loading')
139165
servicePromise = this.serviceRef.value(...params)
140-
const res = await servicePromise
141-
return requestReturn(res)
166+
const servicePromiseResult = await servicePromise
167+
return requestReturnResponse(servicePromiseResult)
142168
}
143169
})
144170
} else {
145171
servicePromise = this.serviceRef.value(...params)
146172
}
147173
}
148-
const res = await servicePromise
149-
return requestReturn(res)
174+
const servicePromiseResult = await servicePromise
175+
return requestReturnResponse(servicePromiseResult)
150176
} catch (error) {
151177
if (currentCount !== this.count) {
152178
return new Promise(() => {})

‎packages/hooks/src/useRequest/__tests__/refreshDeps-auto.spec.ts

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { sleep } from 'test-utils/sleep'
2+
import renderHook from 'test-utils/renderHook'
3+
import { reactive, ref } from 'vue'
4+
import useRequest from '../useRequest'
5+
6+
let text = ''
7+
function getUsername({ id, storeId }: { id: number; storeId: number }): Promise<string> {
8+
return new Promise(resolve => {
9+
setTimeout(() => {
10+
text = `${String(Date.now())}； \t 参数id: ${id} \t； 参数storeId: ${storeId}`
11+
resolve(`${String(Date.now())}； \t 参数id: ${id} \t； 参数storeId: ${storeId}`)
12+
}, 1000)
13+
})
14+
}
15+
16+
describe('useRequest/RefreshDeps', () => {
17+
const id = ref(1)
18+
const store = reactive({
19+
id: 1,
20+
})
21+
const [{ data }] = renderHook(() =>
22+
useRequest(() => getUsername({ id: id.value, storeId: store.id }), {
23+
refreshDeps: true,
24+
}),
25+
)
26+
27+
let prevDataText = ''
28+
29+
it('should init', () => {
30+
expect(id.value).toBe(1)
31+
expect(store.id).toBe(1)
32+
})
33+
34+
it('change id,id dependency unchanged will not request', async () => {
35+
await sleep(1000)
36+
await sleep(100)
37+
prevDataText = text
38+
expect(prevDataText === data?.value).toBeTruthy()
39+
id.value = 1
40+
await sleep(1000)
41+
expect(data?.value === prevDataText).toBeTruthy()
42+
})
43+
44+
it('change id', async () => {
45+
id.value = 2
46+
await sleep(1000)
47+
await sleep(100)
48+
expect(data?.value === prevDataText).toBeFalsy()
49+
prevDataText = data?.value ?? ''
50+
51+
id.value = 1
52+
await sleep(1000)
53+
await sleep(100)
54+
expect(data?.value === prevDataText).toBeFalsy()
55+
})
56+
57+
it('change store id,store id dependency unchanged will not request', async () => {
58+
prevDataText = data?.value ?? ''
59+
store.id = 1
60+
await sleep(1000)
61+
await sleep(100)
62+
expect(data?.value === prevDataText).toBeTruthy()
63+
})
64+
65+
it('change store id', async () => {
66+
prevDataText = data?.value ?? ''
67+
store.id = 2
68+
await sleep(1000)
69+
await sleep(100)
70+
expect(data?.value === prevDataText).toBeFalsy()
71+
prevDataText = data?.value ?? ''
72+
store.id = 1
73+
await sleep(1000)
74+
await sleep(100)
75+
expect(data?.value === prevDataText).toBeFalsy()
76+
})
77+
})
78+
79+
// describe('useRequest/RefreshDeps-auto', () => {
80+
// const id = ref(1)
81+
// const store = reactive({
82+
// id: 1,
83+
// })
84+
// const [{ data }] = renderHook(() =>
85+
// useRequest(() => getUsername({ id: id.value, storeId: store.id }), {
86+
// refreshDeps: true,
87+
// }),
88+
// )
89+
90+
// let prevDataText = ''
91+
92+
// it('should init', () => {
93+
// expect(id.value).toBe(1)
94+
// expect(store.id).toBe(1)
95+
// })
96+
97+
// it('change id,id dependency unchanged will not request', async () => {
98+
// await sleep(1000)
99+
// await sleep(100)
100+
// prevDataText = text1
101+
// expect(prevDataText === data?.value).toBeTruthy()
102+
// id.value = 1
103+
// await sleep(1000)
104+
// expect(data?.value === prevDataText).toBeTruthy()
105+
// })
106+
107+
// it('change id', async () => {
108+
// id.value = 2
109+
// await sleep(1000)
110+
// await sleep(100)
111+
// expect(data?.value === prevDataText).toBeFalsy()
112+
// prevDataText = data?.value ?? ''
113+
114+
// id.value = 1
115+
// await sleep(1000)
116+
// await sleep(100)
117+
// expect(data?.value === prevDataText).toBeFalsy()
118+
// })
119+
120+
// it('change store id,store id dependency unchanged will not request', async () => {
121+
// prevDataText = data?.value ?? ''
122+
// store.id = 1
123+
// await sleep(1000)
124+
// await sleep(100)
125+
// expect(data?.value === prevDataText).toBeTruthy()
126+
// })
127+
128+
// it('change store id', async () => {
129+
// prevDataText = data?.value ?? ''
130+
// store.id = 2
131+
// await sleep(1000)
132+
// await sleep(100)
133+
// expect(data?.value === prevDataText).toBeFalsy()
134+
// prevDataText = data?.value ?? ''
135+
// store.id = 1
136+
// await sleep(1000)
137+
// await sleep(100)
138+
// expect(data?.value === prevDataText).toBeFalsy()
139+
// })
140+
// })

‎packages/hooks/src/useRequest/docs/global/index.en-US.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ source:
77
demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/global/demo/demo.vue
88
---
99

10-
# Global Option `v1.6.1`
10+
# Global Option useRequestProvider `v1.6.1`
1111

1212
:::tip 🌍 useRequestProvider
1313

‎packages/hooks/src/useRequest/docs/global/index.zh-CN.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ source:
77
demoPath: https://github.com/InhiblabCore/vue-hooks-plus/blob/master/packages/hooks/src/useRequest/docs/global/demo/demo.vue
88
---
99

10-
# 全局配置 `v1.6.1`
10+
# 全局配置 useRequestProvider `v1.6.1`
1111

1212
:::tip 🌍 useRequestProvider
1313

‎packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
import { useRequest } from 'vue-hooks-plus'
88
99
function getUsername(): Promise<string> {
10-
return new Promise((resolve, reject) => {
10+
return new Promise(resolve => {
1111
setTimeout(() => {
1212
resolve('vue-hooks-plus useRequest')
1313
}, 1000)
1414
})
1515
}
1616
1717
function getUsername1(): Promise<string> {
18-
return new Promise((resolve, reject) => {
18+
return new Promise(resolve => {
1919
setTimeout(() => {
2020
resolve('vue-hooks-plus useRequest A')
2121
}, 1000)

‎packages/hooks/src/useRequest/docs/pluginDoc/demo/demo.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
> = (fetchInstance, { formatter }) => {
2727
return {
2828
onSuccess: () => {
29-
fetchInstance.setData(formatter?.(fetchInstance.state.data), 'data')
29+
fetchInstance.setFetchState(formatter?.(fetchInstance.state.data), 'data')
3030
},
3131
}
3232
}

‎packages/hooks/src/useRequest/docs/pluginDoc/index.en-US.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ interface UseRequestPluginReturn<TData, TParams extends any[]> {
8484

8585
:::tip Remark
8686

87-
Need to setup `data`, `params`, `loading`, `error` Change requires use using the `setData` on the instance.
87+
Need to setup `data`, `params`, `loading`, `error` Change requires use using the `setFetchState` on the instance.
8888

8989
:::
9090

@@ -95,7 +95,7 @@ Need to setup `data`, `params`, `loading`, `error` Change requires use using the
9595
title=""
9696
desc="Field filter plug-in to modify the original data when the data request is successful"> </demo>
9797

98-
Return the results after the request data has processed the data, call `setData` to reset the value.
98+
Return the results after the request data has processed the data, call `setFetchState` to reset the value.
9999

100100
```typescript
101101
const useFormatterPlugin: UseRequestPlugin<
@@ -110,7 +110,7 @@ const useFormatterPlugin: UseRequestPlugin<
110110
> = (fetchInstance, { formatter }) => {
111111
return {
112112
onSuccess: () => {
113-
fetchInstance.setData(formatter?.(fetchInstance.state.data), 'data')
113+
fetchInstance.setFetchState(formatter?.(fetchInstance.state.data), 'data')
114114
},
115115
}
116116
}

‎packages/hooks/src/useRequest/docs/pluginDoc/index.zh-CN.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ interface UseRequestPluginReturn<TData, TParams extends any[]> {
8787

8888
:::tip 注意
8989

90-
需要设置 `data` 、`params` 、 `loading` 、 `error` 需要使用实例上的 `setData` 进行变更。
90+
需要设置 `data` 、`params` 、 `loading` 、 `error` 需要使用实例上的 `setFetchState` 进行变更。
9191

9292
:::
9393

@@ -98,7 +98,7 @@ interface UseRequestPluginReturn<TData, TParams extends any[]> {
9898
title=""
9999
desc="字段过滤插件, 在数据请求成功的时候修改原本的数据"> </demo>
100100

101-
在请求数据完成后将 外部传入的 `formatter` 处理完数据后将结果返回，调用 `setData` 重新设置值。
101+
在请求数据完成后将 外部传入的 `formatter` 处理完数据后将结果返回，调用 `setFetchState` 重新设置值。
102102

103103
```typescript
104104
const useFormatterPlugin: UseRequestPlugin<
@@ -113,7 +113,7 @@ const useFormatterPlugin: UseRequestPlugin<
113113
> = (fetchInstance, { formatter }) => {
114114
return {
115115
onSuccess: () => {
116-
fetchInstance.setData(formatter?.(fetchInstance.state.data), 'data')
116+
fetchInstance.setFetchState(formatter?.(fetchInstance.state.data), 'data')
117117
},
118118
}
119119
}

‎packages/hooks/src/useRequest/docs/refreshOnWindowFocus/index.en-US.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ By setting `options.refreshOnWindowFocus`, the request will be refreshed when th
2929

3030
:::warning Remark
3131

32-
- `options.refreshOnWindowFocus`、`options.focusTimespan` support dynamic changes.。
32+
- `options.refreshOnWindowFocus` support dynamic changes.
33+
- `options.focusTimespan` support dynamic changes.
3334
- Listen for browser events `visibilitychange` and `focus`.
3435

3536
:::

‎packages/hooks/src/useRequest/docs/refreshOnWindowFocus/index.zh-CN.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ source:
2929

3030
:::warning 注意
3131

32-
- `options.refreshOnWindowFocus`、`options.focusTimespan` 支持动态变化。
32+
- `options.refreshOnWindowFocus` 支持动态变化。
33+
- `options.focusTimespan` 支持动态变化。
3334
- 监听的浏览器事件为 `visibilitychange` 和 `focus`。
3435

3536
:::

0 commit comments

Comments
 (0)