Polkadot.js开发中如何取消或覆盖进行中的JSON-RPC调用？

Polkadot.js 底层基于WebSocket实现JSON-RPC通信，协议本身没有内置传输中请求的强制中断机制，针对连续点击触发重复请求、旧请求返回覆盖新结果的问题，有三个可落地的方案，按推荐优先级排序：

方案1：请求序号竞态拦截（生产环境首选，零侵入） #

这个方案不需要修改Polkadot.js任何内部逻辑，只需要在业务层做结果有效性校验，完全适配「后发起请求ID更高」的特性：

• 给同类型的筛选请求维护模块级的自增序号变量
• 每次发起请求前先将序号+1，存下当前请求对应的序号值
• RPC返回结果后，先校验当前请求的序号是否等于全局最新序号，不匹配直接丢弃结果，不执行任何UI/状态更新逻辑

参考实现代码：

// 资产筛选模块内维护的请求序号，闭包内隔离即可
let latestFilterRequestId = 0

const handleCategoryFilter = async (targetCategory) => {
  // 生成当前请求的唯一序号，同时更新全局最新序号
  const currentRequestId = ++latestFilterRequestId

  // 发起Polkadot.js RPC调用
  const assetList = await api.query.assets.getAssetsByCategory(targetCategory)

  // 校验：如果当前请求不是最新触发的请求，直接丢弃结果
  if (currentRequestId !== latestFilterRequestId) return

  // 只有最新请求的结果才会进入状态更新流程
  setRenderAssetList(assetList)
}

这个方案可以100%解决旧请求返回导致的结果重复、旧数据覆盖新数据问题，且不受Polkadot.js版本升级影响，稳定性最高。

方案2：交互层兜底（搭配方案1使用） #

从触发源头减少无效RPC请求：

• 给筛选按钮加200-300ms的防抖，用户快速连续点击时，只有最后一次点击停顿达到防抖阈值后才会真正发起请求
• 增加请求loading锁：请求发出后到返回前，将筛选按钮置为禁用状态，避免重复点击
• 该方案不能完全覆盖极端网络场景下的竞态，必须搭配方案1使用。

方案3：手动清理Provider待处理队列（真正实现inflight请求取消） #

如果需要从RPC层直接丢弃未返回的请求，可以操作Polkadot.js WsProvider实例内部的待处理请求映射，直接移除旧请求的回调绑定，就算后续WebSocket收到旧请求的返回，也不会触发业务层逻辑，效果等同于取消请求：

const provider = api.provider
let pendingFilterRequestId = null

const handleCategoryFilter = async (targetCategory) => {
  // 存在未完成的旧请求时，直接从待处理队列中移除
  if (pendingFilterRequestId && provider.pendingRequests?.[pendingFilterRequestId]) {
    delete provider.pendingRequests[pendingFilterRequestId]
  }

  // 发起新请求，记录请求ID
  const request = api.query.assets.getAssetsByCategory(targetCategory)
  // 注意：不同Polkadot.js版本记录请求ID的内部字段可能不同，可打印provider实例确认字段名
  pendingFilterRequestId = request.requestId
  const assetList = await request

  pendingFilterRequestId = null
  setRenderAssetList(assetList)
}

注意：该方案依赖Polkadot.js的内部实现，版本升级时需要校验字段兼容性，非特殊场景不推荐作为首选方案。

问题相关截图

内容的提问来源于stack exchange，提问作者cfx_p