# 后台获取指示器

## **后台获取指示器**

查询的 `status === 'pending'` 状态足以表示查询的初始加载状态。但有时你可能希望显示一个额外的指示器，来表明查询正在后台重新获取数据。为此，查询还提供了一个 `isFetching` 布尔值，你可以使用它来显示查询正处于获取状态，而无需关心 `status` 变量的具体状态。

```tsx
function Todos() {
  const {
    status,
    data: todos,
    error,
    isFetching,
  } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })

  return status === 'pending' ? (
    <span>加载中...</span>
  ) : status === 'error' ? (
    <span>错误: {error.message}</span>
  ) : (
    <>
      {isFetching ? <div>刷新中...</div> : null}

      <div>
        {todos.map((todo) => (
          <Todo todo={todo} />
        ))}
      </div>
    </>
  )
}
```

## **显示全局后台获取加载状态**

除了单个查询的加载状态外，如果你想在**任何**查询正在获取数据时（包括后台获取）显示一个全局加载指示器，可以使用 `useIsFetching` Hook：

```tsx
import { useIsFetching } from '@tanstack/react-query'

function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()

  return isFetching ? (
    <div>有查询正在后台获取数据...</div>
  ) : null
}
```
