How to hande response status codes in React Query

当使用 React Query 处理 API 请求时，处理响应状态码是一个重要的部分，因为它能帮助我们根据不同的服务器响应执行相应的操作。React Query 本身不直接处理 HTTP 状态码，它关注于数据获取和缓存的管理。状态码的处理通常在数据获取的函数中进行。

示例：

假设我们使用一个函数 fetchData 来从服务器获取数据，这个函数使用 fetch API 调用一个 URL 并处理响应：

javascript
async function fetchData(url) {
  const response = await fetch(url);
  
  if (!response.ok) {
    // 处理不同的状态码
    switch(response.status) {
      case 400:
        throw new Error("请求参数错误");
      case 401:
        throw new Error("未授权访问");
      case 403:
        throw new Error("禁止访问");
      case 404:
        throw new Error("资源未找到");
      case 500:
        throw new Error("服务器内部错误");
      default:
        throw new Error("未知错误");
    }
  }

  return response.json();
}

接着，我们可以在 React 组件中使用 React Query 的 useQuery 钩子来使用 fetchData 函数，并处理可能发生的错误：

javascript
import { useQuery } from 'react-query';

function MyComponent() {
  const { data, error, isError, isLoading } = useQuery('data', () => fetchData('https://api.example.com/data'));

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>数据已加载</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

处理逻辑:

1. 检查响应: 我们首先检查 response.ok 属性，该属性是一个布尔值，当响应的状态码在 200-299 范围内时为 true。
2. 状态码判断: 如果 response.ok 是 false，我们根据 response.status 来抛出不同的错误。
3. 错误处理: 在组件中，使用 isError 和 error 来判断是否发生错误并展示错误信息。

这个处理方式确保我们能够根据不同的响应状态码做出合适的反应，如重定向用户，提示错误信息等。