乐闻世界logo
搜索文章和话题

How to hande response status codes in React Query

2 个月前提问
20 天前修改
浏览次数18

1个答案

1

当使用 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.okfalse,我们根据 response.status 来抛出不同的错误。
  3. 错误处理: 在组件中,使用 isErrorerror 来判断是否发生错误并展示错误信息。

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

2024年6月29日 12:07 回复

你的答案