RTK-Query技术问题：冻结Get Query Hooks进度至pending并终止Loading请求

要实现终止正在加载的数据获取任务并将进度冻结在"pending"状态，可以结合RTK-Query内置的请求取消方法与React本地状态来实现，具体步骤如下：

1. 利用Hook返回的cancelQuery终止请求 #

RTK-Query自动生成的useGetDocsListQuery Hook会返回cancelQuery函数，调用它可以直接终止当前处于"Loading.."状态的请求，停止数据获取任务。

2. 用本地状态维护冻结的pending状态 #

RTK-Query在请求被取消后，isLoading状态会自动切换为false，因此需要额外维护一个React本地状态来保持"pending"的显示状态。

完整组件示例 #

import { useState, useEffect } from 'react'
import { useGetDocsListQuery } from './docsApi'

export default function DocsList() {
  // 本地状态：控制是否冻结在pending状态
  const [isFrozenPending, setIsFrozenPending] = useState(false)
  const { data, error, isLoading, cancelQuery } = useGetDocsListQuery()

  // 初始同步RTK的加载状态到本地状态，冻结后不再更新
  useEffect(() => {
    if (!isFrozenPending) {
      setIsFrozenPending(isLoading)
    }
  }, [isLoading, isFrozenPending])

  // 终止加载并冻结pending状态的处理函数
  const handleStopAndFreeze = () => {
    // 终止RTK-Query的请求
    cancelQuery()
    // 冻结在pending状态
    setIsFrozenPending(true)
  }

  return (
    <div className="docs-list">
      {/* 优先使用本地冻结状态显示Loading */}
      {(isFrozenPending || isLoading) && <div>Loading..</div>}
      
      {error && !isFrozenPending && <div className="error">加载失败：{error.message}</div>}
      
      {data && !isFrozenPending && (
        <ul>
          {data.map(doc => (
            <li key={doc.id}>{doc.title}</li>
          ))}
        </ul>
      )}

      {/* 触发终止与冻结的按钮 */}
      {(isLoading || isFrozenPending) && (
        <button onClick={handleStopAndFreeze}>终止加载并冻结状态</button>
      )}
    </div>
  )
}

关键说明 #

• cancelQuery()：直接终止当前正在进行的网络请求，不会触发后续的成功/失败状态更新。
• 本地状态isFrozenPending：一旦设置为true，会忽略RTK-Query后续的状态变化，始终展示"Loading.."，实现冻结效果。
• 条件渲染逻辑：确保冻结状态下只显示Loading，未冻结时才展示错误信息或数据列表。

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