alibaba / alibaba/hooks

[useRequest]竞态取消机制与cache

Open
#2,675 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15k
Forks
2.8k
Avg merge
15h 7m
Merged PRs (30d)
2

Description

竞态取消并不是真的取消发送请求,那么既然请求已经发送,返回值应该可以被缓存
```ts
const { data, runAsync, loading, error } = useRequest(getBusinessEntityWalletList, {
manual: true,
cacheKey: '123',
staleTime: 15000,
onSuccess(data, params) {
console.log('==========success', params)
},
})

useEffect(() => {
setTimeout(() => {
const asyncFn = async () => {
console.log('=========run')
runAsync({ Page: 1, PageSize: 20 })
runAsync({
...{ Page: 1, PageSize: 20 },
Page: 2,
})
}

asyncFn()
}, 3000)
}, [])
```

setCache的时机在onSuccess和onMutate时才触发,引用:https://github.com/alibaba/hooks/blob/c7bb04c42bd8800164a112fd448c263bd16b63d4/packages/hooks/src/useRequest/src/plugins/useCachePlugin.ts#L106

但是因为竞态取消机制导致onSuccess只执行一次, 也就是说没办法缓存第一个请求的返回值,这里是否可以改进一下?

Contributor guide

Open the contributing guide

Research direction

Start in packages/hooks/src/useRequest/src/plugins/useCachePlugin.ts at the referenced setCache path, then trace how concurrent runAsync calls are handled before onSuccess. Reproduce the two-call example and verify that the first completed response can be cached without changing the race result for the latest request.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.