Skip to content

fix(useRequest): sync loading state across components sharing the same cacheKey promise#2919

Draft
Copilot wants to merge 3 commits into
masterfrom
copilot/fix-loading-state-sharing
Draft

fix(useRequest): sync loading state across components sharing the same cacheKey promise#2919
Copilot wants to merge 3 commits into
masterfrom
copilot/fix-loading-state-sharing

Conversation

Copilot AI commented Mar 28, 2026

Copy link
Copy Markdown
Contributor

当多个组件使用相同 cacheKey 共享 promise 时,只有发起请求的组件会显示 loading: true,其他订阅同一 cacheKey 的组件在请求进行中始终保持 loading: false

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

问题cacheSubscribe 的订阅回调只同步 data,没有同步 loading 状态。当组件 A 发起新请求时,持有同一 cacheKey 的组件 B/C 无法感知请求开始,因此不显示 loading。

根本原因

  • subscribe 回调只执行 setState({ data }),请求完成时不将 loading 置为 false
  • 没有机制通知其他订阅者「请求已开始」

解决方案

  • cacheSubscribe.ts:新增 triggerLoading / subscribeLoading,提供独立的 loading 状态订阅通道
  • useCachePlugin.ts
    • onRequest:创建新 promise 时调用 triggerLoading(cacheKey),通知其他组件置 loading: true
    • useCreation:通过 subscribeLoading 订阅 loading 事件;数据订阅回调同时设置 loading: false
    • onSuccess / onMutate:重新订阅时回调同样携带 loading: false
    • useUnmount:同步取消 loading 订阅
// 修复前:只同步 data
subscribe(cacheKey, (data) => {
  fetchInstance.setState({ data });
});

// 修复后:同步 data + loading
subscribe(cacheKey, (data) => {
  fetchInstance.setState({ data, loading: false });
});
subscribeLoading(cacheKey, () => {
  fetchInstance.setState({ loading: true });
});

// onRequest 新增:请求开始时通知其他订阅者
triggerLoading(cacheKey);

📝 更新日志

语言 更新描述
🇺🇸 英文 useRequest: fix loading not synced to other components sharing the same cacheKey when a new request is initiated
🇨🇳 中文 useRequest:修复通过 cacheKey 共享 promise 时,只有发起请求的组件 loading 变为 true,其余组件 loading 保持 false 的问题

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

@CLAassistant

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI changed the title [WIP] Fix loading state issue with shared promise in useRequest fix(useRequest): sync loading state across components sharing the same cacheKey promise Mar 28, 2026
Copilot AI requested a review from crazylxr March 28, 2026 15:38
@pkg-pr-new

pkg-pr-new Bot commented Apr 26, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/ahooks@2919
npm i https://pkg.pr.new/@ahooksjs/use-url-state@2919

commit: 8833547

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[useRequest] 当通过 cacheKey 共享 promise 时,只有一个 loading 会变成 true,其余的 loading 还是 false

3 participants